Summary of Common Methods for Clearing Floats in CSS_Experience Exchange

WBOY
Release: 2016-05-16 12:06:13
Original
1962 people have browsed it

There are three commonly used methods to clear floats.
This is the floating source code that has not been cleared. The light yellow background of the parent element cannot be seen when running the code.                                                                                     


[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh to execute]


1. Use empty tags to clear floats. A method I have used for a long time is that the empty tag can be a div tag or a P tag. I am used to using

, which is short enough. Many people also use


. They just need to clear the border for it, but in theory it can be any label. This method is to add such a tag to clear float after all floated elements inside the floated parent element need to be cleared, and define the CSS code for it: clear:both. The disadvantage of this approach is the addition of meaningless structural elements.


[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it to execute]


2. Use the overflow attribute. This method effectively solves the disadvantage of having to add unintentional code by clearing floats through empty label elements. To use this method, you only need to define the CSS property: overflow:auto in the element that needs to be cleared of floating, and that's it! "zoom:1" is for compatibility with IE6.

[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before executing]


3. Use the after pseudo-object to float clearly. This method only applies to non-IE browsers. Please refer to the following examples for specific writing methods. Please pay attention to the following points during use. 1. In this method, height:0 must be set for the pseudo object that needs to clear the floating element, otherwise the element will be several pixels higher than the actual value; 2. The content attribute is necessary, but its value can be empty, blue ideal discussion In this method, the value of the content attribute is set to ".", but I found that it is also possible to leave it empty.


[Ctrl A Select all Note:If you need to introduce external Js, you need to refresh it before execution]


These three methods all have certain disadvantages, and you should choose the best when using them. choice, the second method is more preferable in comparison. The above methods are not original and are all sourced from the Internet. They are compiled here. The original author reserves all rights.
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