CSS Tips Clearfix
Floating is a very important layout technology in CSS and is widely used in web page layout. But it will also cause some problems, such as the height collapse of the parent element. Clearfix technology was created to solve this problem. This article will introduce several common methods of clearing floats.
1. The problem of floating
First, let’s understand the problem of floating.
HTML：
CSS：
.left { float: left; width: 300px; height: 100px; background-color: #ccc; } .right { float: right; width: 300px; height: 200px; background-color: #eee; }
The effect is as shown below:
##You can see, left Both the side area and the right area use floating technology. But if we want the height of the parent element (i.e. .parent) to be equal to the height of the child element, then the following problems will occur:
As you can see, the height of the parent element Significantly smaller. This is because the child elements use floating, so they are out of the document flow, and the parent element does not contain them, causing them to not be included in the height calculation.
2. Several methods of clearing float
In order to solve this problem, we need to let the parent element recalculate the height by clearing the float. Here are some commonly used methods to clear floats:
1. Use empty labels to clear floats
This is a very common method. It uses the characteristics of empty labels to clear floats. The code is as follows:
HTML:
CSS:
.left { float: left; width: 300px; height: 100px; background-color: #ccc; } .right { float: right; width: 300px; height: 200px; background-color: #eee; }
Add an empty tag at the end of the parent element and set
clear:bothto indicate the tag Clear float.
But this method is more troublesome and requires adding a meaningless tag, which is not conducive to code maintenance.
2. Use the ::after pseudo-element to clear floats
Similar to the first method, use the ::after pseudo-element to clear floats. Since ::after is a block element, you can add a block-level element after the floated element to clear the float.
HTML:
CSS:
.left { float: left; width: 300px; height: 100px; background-color: #ccc; } .right { float: right; width: 300px; height: 200px; background-color: #eee; } .parent::after { content: ""; display: block; clear: both; }
Use the ::after pseudo-element on the parent element and set
content:"";display:block;clear :both;means adding a block-level element after the parent element and clearing the float.
This method only requires adding CSS styles on the parent element, without adding extra HTML tags, which is very convenient.
3. Use BFC to clear floats
BFC (Block Formatting Context, block-level formatting context) is a concept in CSS that allows elements to be rendered in an independent rendering area. , you can clear the float, the implementation is as follows:
HTML:
CSS:
.left { float: left; width: 300px; height: 100px; background-color: #ccc; } .right { float: right; width: 300px; height: 200px; background-color: #eee; } .parent { overflow: hidden; }
Set
overflow:hiddenon the parent element, at this time , the parent element forms a BFC so that the floating elements can be included correctly.
But this method also has some limitations, because it will change the style of the parent element. For example, the parent element cannot set negative margins, nor can it set the z-index attribute.
3. Summary
This article introduces several methods of clearing floats, including using empty tags to clear floats, using ::after pseudo-elements to clear floats, and using BFC to clear floats. These methods are all practiced techniques and can be flexibly applied in project development to solve problems caused by floating.
The above is the detailed content of css clear float. For more information, please follow other related articles on the PHP Chinese website!
