CSS focus - float
There are three ways of traditional web page layout:
The essence of web layout: use CSS to place the box and put the box in the corresponding position.
CSS provides three traditional layout methods (in short, how to arrange the boxes)
1. Normal stream (standard stream / document stream) 2. float 3. Positioning.
These three layout methods are used to place the box. When the box is placed in the appropriate position, the layout is naturally completed.
In the actual development, a page basically includes these three layout modes (there are new layout modes on the mobile terminal).
1. Standard flow:
The so-called standard flow is that labels are arranged in a specified default way.
(1) Block level elements will occupy one row and be arranged from top to bottom;
(2) The elements in the line will be arranged in order from left to right. If they touch the edge of the parent element, they will wrap automatically.
The above are standard flow layouts, and standard flow is the most basic layout method.
2. Floating:
Why float?
There are many layout effects, and the standard flow cannot be completed. At this time, you can use floating to complete the layout, because floating can change the default arrangement of element labels.
The most typical application of Floating: multiple block level elements can be arranged and displayed in the same row.
The first rule of web page layout: multiple block level elements are arranged vertically in the standard flow, and multiple block level elements are arranged horizontally to find floating.
The second rule of web page layout: first set the size of the box, and then set the position of the box.
Float: the float attribute is used to create a float box and move it to one side until the left or right edge touches the edge containing the block or another float box.
Syntax:
Selector {float: attribute value;}
Parameter: none Element does not float (default)
left The element floats to the left
right The element floats to the right
(1) Set floating style
<style> .left, .right { float: left; width: 200px; height: 200px; background-color: pink; } .right { float: right; } </style> </head> <body> <div class="left">Left float</div> <div class="right">Right float</div> </body>
(2) Floating characteristics
After adding floating elements, they will have many characteristics that we need to master.
characteristic:
1. Floating elements will break away from the standard flow (de standard)
2. Floating elements will be displayed in one line and the top of the element will be aligned.
3. Floating elements will have the characteristics of inline block elements.
Of which:
[1] Off bid: Set the most important properties of the float ing element:
1. Move from the control (floating) of standard ordinary flow to the specified position (moving), commonly known as off standard.
2. The floating box no longer retains its original position.
[2. If multiple boxes are set to float, they will be displayed in a row of attribute values and aligned at the top.
Note: floating elements are close to each other (there will be no gap). If the parent width cannot hold these floating boxes, the extra boxes will be aligned in another line.
<style> /* Floating properties - display in one line */ div { width: 200px; height: 200px; background-color: pink; float: left; } .two { background-color: purple; height: 300px; } .three { background-color: salmon; } </style> </head> <body> <div>1</div> <div class="two">2</div> <div class="three">3</div> <div>4</div></body>
[3] Floating elements have the properties of inline block elements
Any element can be floated, rather than the element in the original mode. After adding the float, it has the characteristics similar to the in-line paragraph element.
If the inline element is floating, the height and width can be set directly without converting the block level and inline block elements
Note: if the width of the block level box is not set, the default width is the same as that of the parent, but after adding floating, its size is determined according to the content;
There is no gap in the middle of the floating box, which is close to each other;
The same is true for inline elements.
<style> span, div { float: left; width: 200px; height: 100px; background-color: salmon; } p { float: right; height: 200px; background-color: sandybrown; } </style> </head> <body> <span>1</span> <span>2</span> <div></div> <p>p</p> </body>
(3) Floating is used with standard flow parents
Floating elements are often used with standard flow parents,
In order to restrict the position of floating elements, our general strategy for web page layout is:
First, the parent elements of the standard flow are used to arrange the upper and lower positions, and then the internal child elements are floating to arrange the left and right positions, which meets the first criterion of web page layout.
Notes for floating layout:
1. Parent matching of floating and standard flow
First, the parent elements of the standard flow are used to arrange the upper and lower positions, and then the internal child elements are floating to arrange the left and right positions.
2. If an element floats, theoretically the other sibling elements should also float
There are multiple boxes in a box. If one box is on Fudong Road, other brothers should also float to prevent problems.
A floating box will only affect the standard flow behind the box, not the previous standard flow.
<style> .box { width: 1200px; height: 460px; background-color: coral; margin: 0 auto; } .left { width: 230px; height: 460px; background-color: pink; float: left; } .right { width: 970px; height: 460px; background-color: red; float: left; } </style> </head> <body> <div class="box"> <div class="left">left</div> <div class="right">right</div> </div> </body>
(4) Clear float
Why clear float?
*In many cases, it is inconvenient to give the height of the parent box, but the child box floats and does not occupy a position. Finally, when the height of the parent box is 0, it will image the following standard flow box.
Clear floating essence:
Understand the essence of floating is to remove the impact of floating elements.
Note: if the parent box itself has a height, you do not need to clear the float;
After floating is cleared, the parent will automatically monitor the height according to the floating sub box. If the parent has a height, it will not affect the following standard flow.
Syntax:
Selector{
clear: attribute value;
}
Parameters: left Floating elements on the left are not allowed (clear the influence of floating on the left)
right Floating elements on the right are not allowed (understand the impact of floating on the right)
both At the same time, remove the influence on the left and right.
In practical work, we almost use clear: both;
The strategy to clear floating is to close floating.
How to clear the float:
1. Additional labeling method, also known as partition method, is a practice recommended by W3C.
2. Add the overflow attribute to the parent.
3. Add after pseudo element to parent.
4. Add double pseudo elements to the parent.
[1] Additional labeling method:
Additional labeling method, also known as partition method, is recommended by W3C.
The extra tag method adds an empty tag at the end of the floating element, such as < div style = "clear: both" > < / div >, or other tags (such as < br / >).
<style> .box { width: 1200px; margin: 0 auto; border: 5px solid red; } .damao { float: left; width: 300px; height: 200px; background-color: yellow; } .ermao { float: left; width: 200px; height: 200px; background-color: aqua; } .footer{ height: 200px; background-color: blueviolet; } .clear { clear: both; } </style> </head> <body> <div class="box"> <div class="damao">Big hair</div> <div class="ermao">twenty fen</div> <!-- This new box must be a block level element, not an inline element, not an inline element --> <div class="clear"></div> </div> <div class="footer">footer</div> </body>
be careful:
Advantages: easy to understand and write.
Disadvantages: adding many meaningless empty tags must be block level elements.
It may be encountered in practical work, but it is not often used.
[2] Add overflow attribute to parent element:
You can add an overflow attribute to the parent and set its attribute to hidden, auto, or scroll only.
<style> .box { /* Clear float */ overflow: hidden; width: 1200px; margin: 0 auto; border: 5px solid red; } .damao { float: left; width: 300px; height: 200px; background-color: yellow; } .ermao { float: left; width: 200px; height: 200px; background-color: aqua; } .footer{ height: 200px; background-color: blueviolet; } </style> </head> <body> <body> <div class="box"> <div class="damao">Big hair</div> <div class="ermao">twenty fen</div> </div> <div class="footer">footer</div> </body>
be careful:
Advantages: simple code.
Disadvantage: overflow cannot be displayed.
[3] : after pseudo element method:
: after mode is an upgraded version of the additional labeling method.
Syntax:
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6, 7 proprietary*/
*zoom: 1;
}
<style> .clearfix:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { *zoom: 1; } .box { width: 1200px; margin: 0 auto; border: 5px solid red; } .damao { float: left; width: 300px; height: 200px; background-color: yellow; } .ermao { float: left; width: 200px; height: 200px; background-color: aqua; } .footer { height: 200px; background-color: blueviolet; } </style> </head> <body> <div class="box clearfix"> <div class="damao">Big hair</div> <div class="ermao">twenty fen</div> </div> <div class="footer">footer</div> </body>
Note: advantages: without added labels, the structure is simpler
Disadvantages: take care of low version browsers
Representative websites: Baidu, Taobao, Netease, etc.
[4] Double pseudo element method:
Use before and after double pseudo elements to clear floats.
Syntax:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
<style> .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; } .clearfix { *zoom: 1; } .box { width: 1200px; margin: 0 auto; border: 5px solid red; } .damao { float: left; width: 300px; height: 200px; background-color: yellow; } .ermao { float: left; width: 200px; height: 200px; background-color: aqua; } .footer { height: 200px; background-color: blueviolet; } </style> </head> <body> <div class="box clearfix"> <div class="damao">Big hair</div> <div class="ermao">twenty fen</div> </div> <div class="footer">footer</div> </body>
Note: advantages: more concise code
Disadvantages: take care of low version browsers
Representative websites: Xiaomi, Tencent, etc