1. Three mechanisms of CSS layout:
The core of web page layout is to use CSS to place boxes.
CSS has three traditional layout styles: normal flow, float, and position.
Ordinary flow: also called standard flow or document flow. The tags of ordinary flow are arranged according to the specified default method. Block-level elements occupy a single line and are arranged from top to bottom; in-line elements are arranged from left to right, and automatically wrap when they reach the edge of the parent element.
Float: You can change the default arrangement of elements and let the box float out of the normal flow. The main thing is to arrange multiple block-level elements horizontally on one line.
Positioning: Position the box at a certain position in the browser window.
2. Why is float needed?
In the actual layout, if you encounter the following problems:
How to make block-level boxes line up horizontally on one line?
How to align block-level boxes left and right?
Obviously, the way the standard streams are laid out doesn't work. The standard flow cannot meet our needs, so we need to use floating to solve the problem of this kind of web page layout.
3. What is float?
Floating means that after setting the floating attribute to the element, it will break away from the control of the standard flow and let the element move to the specified position.
4. The role of floating:
Display block-level boxes horizontally on a single line.
The left and right alignment of the box can be achieved.
Floating can also control the picture to achieve the effect of text wrapping around the picture.
5. Grammar:
selector {float: attribute value;}
There are three attribute values of float: the default is none, and the element does not float; left is set to float to the left; right is set to float to the right.
6. Features:
①The element that is set to float will float on the top of the normal flow, without occupying a position, and deviate from the standard flow, referred to as "off-label".
<div class="one">1</div>
<div class="two">2</div> .one {
width: 100px;
height: 100px;
background-color: pink;
float: left;
}
.two {
width: 200px;
height: 200px;
background-color: skyblue;
}
If box 1 is set to float, it will float on top of box 2 in the normal flow, and the floating box 1 no longer occupies the position.
②The floating elements are close to each other. When the parent box cannot hold the floating sub-boxes, the extra sub-boxes will be arranged in another row.
<div class="father">
<div class="one">1</div>
<div class="two">2</div>
<div class="three">3</div>
<div class="four">4</div>
</div><style>
.father {
width: 450px;
height: 450px;
background-color: blanchedalmond;
}
.one,
.two,
.three,
.four {
width: 140px;
height: 140px;
float: left;
}
.one {
background-color: pink;
}
.two {
background-color: skyblue;
}
.three {
background-color: greenyellow;
}
.four {
background-color: orange;
}
</style>
Boxes 1, 2, 3, and 4 all have floats, and they will be next to each other horizontally. The width of the parent box is not enough for the fourth box, so box 4 will be arranged in another row.
If you set display: inline-block for the sub-boxes, you can also arrange the sub-boxes horizontally on a line, but in doing so, there will be gaps between the boxes. The boxes are not close together like floats.
③Floating will only affect the elements of the current or subsequent standard flow, and will not affect the elements of the standard flow before floating.
7. Clear floating:
7.1 Why clear the float?
There is a situation that there are many child elements in the parent box, and the height of the parent box is not easy to give. I want the content of the child elements to support the height of the parent box. However, if the child element is set to float, it will break away from the standard flow, and will not support the height of the parent element, so the height of the parent element is 0.
7.2 Clear the essence of floating:
It is to solve the problem that the height of the parent element is 0 caused by the floating of the child element. After clearing the float, the parent element will automatically detect the height according to the floated child element. With the height of the parent box, it will not affect the elements of the standard flow behind.
7.3 Ways to clear floats:
①Additional label method (partition wall method): add a label after the last floating element (W3C recommended practice)
<div class="two" style="clear:both"></div>Disadvantages: Add many meaningless tags, poor structure
② Add overflow to the parent: set the attribute to: hidden or auto or scroll
.father {
width: 450px;
height: 450px;
background-color: blanchedalmond;
overflow: hidden;
}Disadvantage: It will hide the content and cannot display the overflowing part
③ Add to the parent: after pseudo-element:
The upgrade of the extra label is equivalent to adding a new box to the back of the box
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}Advantages: No new tags added, simpler structure
Disadvantages: Need to take care of low-version browsers
④ Add double pseudo-elements to the parent:
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}Pros: more concise code
Disadvantages: Need to take care of low-version browsers