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

This article mainly explains "what are the common methods for DIV+CSS to clear floats?" the content in the article is simple and clear, and it is easy to learn and understand. below, please follow the editor's way of thinking to study and learn "what are the common methods for DIV+CSS to clear floats?"

DIV+CSS floating effect refers to the situation where the parent element floats away from the text stream without defining the height of the parent element, resulting in the collapse of the height of the parent element (PS: normally, the height of the parent element is supported by the child element); or the layout of other elements is confused due to the floating of some child elements and the separation from the text stream.

Common methods for DIV+CSS to clear floats are as follows:

1. Add clear: both; to the CSS without floating child elements. If all child elements have floats, you can add a new empty child element, and add clear: both; to its CSS so that you can use the removal of floating child elements to re-prop up the height of the parent element, thus achieving the effect of clearing the float. The code and effect are as follows:

.fl {float:left;}

.demo {background:#ccc;}

.item1 {background:#F571E3;height:100px;width:100px;}

.item2 {background:#21B2F7;height:200px;width:100px;clear: both;}

Clear floats with clearfix

Clear the effect of item1 floating to the left before floating (where the height of the parent element is stretched by the high extension of the unfloating item2 element):

A complete collection of common methods for clearing floats in DIV+CSS

Clear the effect of item1 floating to the right before floating (where the height of the parent element is stretched by the high extension of the unfloating item2 element):

A complete collection of common methods for clearing floats in DIV+CSS

Clear the floating effect (because DIV is a block-level element and occupies an exclusive line, item2 is on the following line, where the height of the parent element is stretched by the item1 element and the item2 element):

A complete collection of common methods for clearing floats in DIV+CSS

2. When all child elements float, add overflow: hidden; to the CSS of the parent element (when the child element is not all floating, the non-floating element will stretch the height of the parent element, but the layout caused by the floating element should be modified using padding), but the parent element of this method cannot be positioned using position instead, otherwise it will not work. The code and effect are as follows:

.demo {background:#ccc;overflow: hidden;}

.item1 {background:#F571E3;height:100px;width:100px;}

.item2 {background:#21B2F7;height:200px;width:100px;}

Clears the effect before floating, but the background background:#ccc; has no effect due to the high collapse of the parent element:

A complete collection of common methods for clearing floats in DIV+CSS

Clear the effect after floating:

A complete collection of common methods for clearing floats in DIV+CSS

3. Add pseudo-classes to the parent element: after and zoom. The code and effect are as follows:

.demo {background:#ccc;zoom: 1;}

.demo: after {display:block;clear:both;content: "; visibility:hidden;height:0}

A complete collection of common methods for clearing floats in DIV+CSS

4. If you are using bootstrapt, you can add a class whose class is clearfix to its parent element. The code and effect are as follows:

Thank you for your reading, these are the contents of "what are the common methods for DIV+CSS to clear floats?" after the study of this article, I believe you have a deeper understanding of what are the common methods for DIV+CSS to clear floats, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.