In this paper,
The framework diagram of this paper is as follows:
What is floating?
The float defined in W3school is that a floating box can move left or right until its outer edge touches the border that contains the box or another floating box. Because the float box is out of the normal flow of the document, the block box in the normal flow of the document behaves as if the float box does not exist.
Two, what are the characteristics of floating?
The characteristics of floating can be summed up in eight words: off label, welt, word circumference and shrinkage.
To illustrate, look at the figure below: As box 1 floats left, it detaches from the document flow (de-indexing) and moves left (edging) until its left edge touches the left edge of the containing box. Because it’s no longer in the document flow, it doesn’t take up space and actually covers box 2, making box 2 disappear from the view. If there is text in box 2, it will be arranged around box 1.
If you float all three boxes left, then box 1 floats left until it hits the include box, and the other two float left until it hits the previous one.
A floating inline element (such as the SPAN IMG tag) can set the width without setting display: block.
<style>
div{
float: left; background-color: greenyellow; } < / style > < / head > < body > < div > this is a paragraph < / div > < / body >Copy the codeThe following results are obtained:
What are the disadvantages of floating?
Take a look at the following code:
<style>
.parent{
border: solid 5px;
width:300px;
}
.child:nth-child(1){
height: 100px;
width: 100px;
background-color: yellow;
float: left;
}
.child:nth-child(2){
height: 100px;
width: 100px;
background-color: red;
float: left;
}
.child:nth-child(3){
height: 100px;
width: 100px;
background-color: greenyellow;
float: left;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
</body>
Copy the codeWe wanted the parent container to have three floating elements wrapped around it, but instead we got this:
Four, how to clean up floating?
Clear float is not floating, clear float caused by the parent container height collapse.
Routine 1: Add height to the parent element of a floating element (poor scalability)
If an element is to float, its parent element must have height. Height of the box to close the float. By setting height directly to the parent element, it is not possible to add height to all boxes in practice, which is cumbersome and can not accommodate the rapid change of the page; Alternatively, the height of the parent container can be stretched by the content (such as an IMG image), which is often used in practice.
Routine 2: clear:both;
Add the last redundant element to the last child element and set it to clear:both to clear the float. It is important to note that the element added at the end of the parent element must be a block-level element, otherwise it cannot be raised to the height of the parent element.
<div id="wrap">
<div id="inner"></div>
<div style="clear: both;"></div>
</div>
Copy the code #wrap{
border: 1px solid;
}
#inner{
float: left;
width: 200px;
height: 200px;
background: pink;
}
Copy the codeRoutine 3: Pseudo-element cleanup float
The above method can clear the float, but we don’t want to add these meaningless redundant elements to the page, how to clear the float? Combine: After pseudo-elements with IEhack to make it perfectly compatible with all major browsers. IEhack refers to triggering hasLayout.
<div id="wrap" class="clearfix">
<div id="inner"></div>
</div>
Copy the code #wrap {
border: 1px solid;
}
#inner {
float: left; width: 200px; height: 200px; background: pink; } /* Enable hasLayout */. Clearfix {*zoom: 1; } /* Ie6 7 does not support pseudo-elements */. Clearfix :after {content:' '; display: block; clear: both; height:0; line-height:0; visibility:hidden; // Allow the browser to render it, but not display it}Copy the codeAdd a ClearFix class to the parent container of the floating element, and then add an :after pseudo-element to the class to clean up the float by adding an invisible block element to the end of the implementation element. This is a general cleanup float scheme and recommended
Approach 4: Use Overflow: Hidden for the parent element;
This scheme allows the parent container to form a BFC (block-level format context), which can contain floats, often used to solve the problem of high collapse of floating parent elements.
Triggering mode of the BFC
We can add the following attributes to the parent element to trigger the BFC:
-
Float for left | right
-
Overflow for hidden | auto | scorll
-
The display of the table – cell | table – caption | inline – block
-
The position of absolute | fixed
You can set Overflow: Auto to the parent element here, but it is best to use Overflow: Hidden for COMPATIBILITY with IE.
But there is a drawback to this method: if the content is out of the box, it will cut out the extra parts, so it can’t be used at that time.
The main features of BFC:
-
The BFC container is an isolated container that does not interfere with other elements. So we can solve the vertical margin folding problem with a BFC that triggers two elements.
-
BFC does not overlap floating elements
-
BFC can contain floats, which can clear floats.
Routine 5: BR label clear float
The BR tag has one attribute: clear. This property is a useful tool for clearing floats. Set the property clear in the BR tag and assign the value all. That clears the float.
<div id="wrap">
<div id="inner"></div>
<br clear="all" />
</div>
Copy the code #wrap {
border: 1px solid;
}
#inner {
float: left;
width: 200px;
height: 200px;
background: pink;
}
Copy the codeIf you find this article helpful, you are welcomeMy GitHub blogLike and follow, thank you!