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

Editor to share with you what are the common ways in which Css floats clearly. I hope you will get something after reading this article. Let's discuss it together.

In the use of css layout, floating layout is often used, but after floating, elements will float away from the document stream and float on the page, causing the parent node not to sense the height of the page resulting in a high collapse and allowing subsequent child nodes to be covered by floating nodes, it is necessary to use clear floating to let nodes sense the height of floating nodes to facilitate the layout.

In clearing floats, you can use the release to clear floats.

What is commonly used in clearing floats is to use clear:both to clear the floating effects on both sides. This can be achieved by adding div nodes.

You can also use the way bootstrap uses to clear floats, using pseudo-classes of after and before to clear floats.

The main purpose of clearing the float is to make the parent node sense the height of the floating child node. You can use overflow:hidden to make the parent node sense the height of the child node. Of course, this method will cause the nodes that should not use this attribute to produce excess hiding, which needs to be noted.

Talking about the clear float in css

Clear floating less used by bootstrap

Bug generated in float

In the implementation of floating, if one node floats and the other node does not float, then the contents of the non-floating node use bootstap to clear the float, and the perception is that the height of the floating node leads to unnecessary trouble.

Css Code:

.clearfix: after {

Content: ""

Display: table

}

.clearfix: bofore {

Content: ""

Display: table

}

.clearfix: after {

Clear: both

}

# nav {

Float: left

Width: 100px

Height:300px

Background-color: red

Position: relative

}

.content {

Height: 600px

Margin-left: 100px

Background-color: green

}

.inner {

Background-color: # fff

Color: # ff4500

}

.inner p {

Box-sizing: boder-box

-webkit-box-sizing: border-box

Width: 50%

Text-align: center

Float: left

Background-color: # cecece

Padding: 10px 0

}

.last {

Border-left: 1px solid # dcdcdc

}

After reading this article, I believe you have a certain understanding of "what are the common ways for Css to float clearly". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

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.