current position:Home>CSS - (5) floating layout

CSS - (5) floating layout

2021-08-25 22:43:15 I I eat vermicelli

CSS Floating layout

One 、 float float brief introduction

In the traditional printing layout , Text can surround pictures as needed . This method is generally called “ Text wrapping ”. In Web Design , Applied CSS Of float The page element of the property is like a picture surrounded by text in a printed layout .

Floating properties float yes CSS The best weapon for layout , We can flexibly locate through different floating attribute values div Elements , To achieve the purpose of web page layout . We can go through CSS Properties of float Float the element left or right . in other words , Float the box and its contents to the right or left of the document . This property has always been applied to images in the past , Surround the image with text , But in the CSS in , Any element can float .

The floating element generates a block-level box , No matter what element it is .

grammar :

float: Value ;

explain :

float The value of the attribute is simple and easy to remember , Whatever you can use 2 Attribute values :

float Property value explain
left Element floating to the left
right The element floats to the right

give an example :

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS float float attribute </title>
		<style type="text/css">
		/* Define the parent element style */
		#father{
			width: 400px;
			background-color: cadetblue;
			border:2px solid silver;
		}
		/* Definition div Sub element styles */
		#father div{
			padding: 10px;
			margin: 15px;
			border: 2px dashed red;
			background-color: #A9A9A9;
		}
		/* Define text styles */
		#father p{
			margin: 15px;
			border: 2px dashed red;
			background-color: #A9A9A9;
		}
		#son1{/* Set up here son1 Floating mode */}
		#son2{/* Set up here son2 Floating mode */}
		#son3{/* Set up here son3 Floating mode */}
		</style>
	</head>
	<body>
		<div id="father">
			<div id="son1">box1</div>
			<div id="son2">box2</div>
			<div id="son3">box3</div>
			<p> This is the text around the floating box , This is the text around the floating box , This is the text around the floating box , This is the text around the floating box , This is the text around the floating box , This is the text around the floating box ,</p>
		</div>
	</body>
</html>

The code above defines it 4 individual div block , One is the parent block , in addition 3 One is its sub block . For the convenience of observation , Each block is added with a border and background color , And let body And each div There is a certain margin( Margin ).

If 3 There is no floating mode set for any sub block , In the parent box , because div Element is a block element , therefore 4 Each box extends to the right , And arranged from top to bottom , Here's the picture :

1️⃣ Set the first 1 individual div float

#son{ float:left; }

Preview effect :

analysis :

because box1 Set to float left ,box1 Becomes a floating element , So now box1 The width of no longer extends , Its width is the minimum width of the content , And the next adjacent div Elements (box2) Will cling to box1, This is due to the effect of floating .

2️⃣ Set the first 2 individual div float

#son{ float:left; }

Preview effect :

analysis :

because box2 Becomes a floating element , therefore box2 Also with box1 equally , The width no longer extends , Instead, the width is determined by the content . And the next adjacent div Elements (box3) Become close to floating box2.

Why at this time box1 and box2 There is a certain distance between them ? In fact, the reason is that : We are CSS Set up in box1、box2 and box3 There is a certain outer margin margin:15px;, If box1 For floating elements , And adjacent box2 Not a floating element , be box2 Will cling to box1; But if box1 and box2 At the same time, it is a floating element , The outer margin will take effect . This is due to the characteristics of floating elements .

3️⃣ Set the first 3 individual div float

analysis :

because box3 Becomes a floating element , therefore box3 Follow box2 and box1 equally , The width no longer extends , Instead, the width is determined by the content , And the next adjacent p Elements (box3) Become close to floating box3.

because box1、box2 and box3 All floating elements ,box1、box2 and box3 Between margin Property takes effect .

4️⃣ Change the floating direction

ad locum , We will box3 The floating mode is changed to “float:right”, The preview effect in the browser is as follows :

Two 、 Remove the floating clear brief introduction

stay CSS in , Clear float is set in the element after setting left float or right float .

grammar :

clear: Value ;

explain :

clear The attribute values are as follows :

clear Property value explain
left Clear left float
right Clear right float
both Float left and right to clear

In the previous example 4️⃣ Add the following code to :

p{clear:both;}

The browser preview effect is as follows :

analysis :

because p Element clears the float , therefore p The float generated by the previous element of an element has no effect on subsequent elements , therefore p The text of the element does not surround the floating element .

Reference article :https://blog.csdn.net/wuyxinu/article/details/103583618

copyright notice
author[I I eat vermicelli],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210825224310969A.html

Random recommended