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
