Shulou(Shulou.com)06/01 Report--

This article mainly introduces what css has to remove floating methods, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian with you to understand.

Method 1 of css to clear floats:

Use an empty element with a clear attribute

Clean up the float by using an empty element such as an empty element after the floating element and assigning the .clear {clear:both;} attribute in CSS. It can also be used or used for cleaning.

.news {

Background-color:gray

Border:solid1pxblack

}

.newsimg {

Float:left

}

.newsp {

Float:right

}

.clear {

Clear:both

}

Sometext

Description:

Advantages: simple, less code, good browser compatibility.

Disadvantages: need to add a large number of non-semantic html elements, the code is not elegant enough, not easy to maintain later.

Method 2 for css to clear floats:

Use the overflow property of CSS

Adding overflow:hidden; or overflow:auto; to the container of the floating element clears the float, and you also need to trigger the hasLayout in the IE6, such as setting the container width and height for the parent element or setting the zoom:1.

.news {

Background-color:gray

Border:solid1pxblack

Overflow:hidden

* zoom:1

}

.newsimg {

Float:left

}

.newsp {

Float:right

}

Sometext

Description:

After adding the overflow attribute, the floating element goes back to the container layer, propping up the container high and achieving the effect of cleaning up the float.

Advantages: there are no structural and semantic problems, and there is very little code

Disadvantages: when the content increases, it is easy to avoid automatic line wrapping and the elements that need to be overflowed cannot be displayed. In 2004, POPO found that overflow:hidden would invalidate the middle button, which is unacceptable to me as a multi-tag browsing controller. So don't use it.

Method 3 for css to clear floats:

Using adjacency elements to handle

Do nothing but add a clear attribute to the element after the floating element.

.news {

Background-color:gray

Border:solid1pxblack

}

.newsimg {

Float:left

}

.newsp {

Float:right

}

.content {

Clear:both

}

Sometext

Method 4 for css to clear floats:

Use the: after pseudo element of CSS

Combine: after pseudo-element (note that this is not a pseudo-class, but pseudo-element, which represents the nearest element after an element) and IEhack, which is perfectly compatible with current mainstream browsers, where IEhack refers to triggering hasLayout.

Add a clearfix class to the container of the floating element, and then add one to the class: after pseudo-element implementation element to add an invisible Blockelement cleanup float at the end of the element.

.news {

Background-color:gray

Border:solid1pxblack

}

.newsimg {

Float:left

}

.newsp {

Float:right

}

.clearfix: after {

Content: "020"

Display:block

Height:0

Clear:both

Visibility:hidden

}

.clearfix {

/ * trigger hasLayout*/

Zoom:1

}

Sometext

Note: add an invisible space "020" or dot "." at the end of the inner element of the container through the CSS pseudo-element, and assign the clear attribute to clear the float. It is important to note that for IE6 and IE7 browsers, add a zoom:1; trigger haslayout to the class clearfix.

Thank you for reading this article carefully. I hope the article "what are the ways to remove floats in css" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.