In-depth understanding of the usage of clearfix in css

高洛峰
Release: 2017-03-17 16:32:00
Original
2428 people have browsed it

If there is a p as an external container, and the internal p is set to float style, the external container p cannot be opened because there is no clear inside. Look at the example below:

pThe layout is as follows:

In-depth understanding of the usage of clearfix in css

The Css code is as follows:

.out{border:1px solid #F00; width:500px;}   
.inner1{width:200px; height:200px; float:left; border:1px solid #00F;}   
.inner2{width:200px; height:200px; float:left; border:1px solid #0F0;}
Copy after login


IE and FF display as shown below:

In-depth understanding of the usage of clearfix in css

Traditional human solution:

In-depth understanding of the usage of clearfix in css

However, it is a bit inappropriate to add a p so many times. One is that there is an extra meaningless p, and the other is that when using dojo to do Drag & Drop, since this p is a byte point of the container p, if this node is moved, it will cause layout bugs: If you want The p in the displayed blue box is moved after this p, and because of clear:both, it will be forced to be displayed on a new line. Therefore, it is best to use the clearfix method below. Add clearfix style to outer p.

clearfix is ​​defined as follows:

.clearfix:after{visibility:hidden;display:block;font-size:0;content: " ";clear:both;height:0;}   
.clearfix{*zoom:1;}
Copy after login


In-depth understanding of the usage of clearfix in css

The display will be normal after this modification.

That code is used to clear floats.

The following code can be explained like this:

.clearfix:after {       <----在类名为“clearfix”的元素内最后面加入内容;   
    content: ".";     <----内容为“.”就是一个英文的句号而已。也可以不写。   
    display: block;   <----加入的这个元素转换为块级元素。   
    clear: both;     <----清除左右两边浮动。   
    visibility: hidden;      <----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间,只是看不到而已;   
    height: 0;     <----高度为0;   
    font-size:0;    <----字体大小为0;   
}
Copy after login


The entire code is equivalent to following the floating element Followed by an empty p with a width and height of 0, and then set it to clear: both to achieve the effect of clearing floats. (The principle of this CSS is to use the after pseudo-object, which will add the content in the content at the end of the element to which clearfix is ​​applied, that is, a ".", and set it as a block-level element (display="block"); height Set it to 0, clear="both", and then hide its content (visibility="hidden"). This will expand the block-level element.)

The reason why you use it is because, you There is no need to write a large number of meaningless empty tags in the html file, and the floating tags can be cleared.

.clearfix { *zoom:1;}

The above in-depth understanding of the usage of clearfix in css (a must-read article) is all the content shared by the editor. I hope it can give you a reference, and I also hope that everyone will support the PHP Chinese website.

For more in-depth understanding of the usage of clearfix in css and related articles, please pay attention to the PHP Chinese website!

Related articles:

In-depth analysis of clearfix to clear floats

A brief discussion on the usage of clearfix and clear in css

CSS about clearfix clearing floating method

The most comprehensive CSS clearfix clearing floating method

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!