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

This article mainly introduces several kinds of clear floats in web development, which has a certain reference value, and interested friends can refer to it. I hope you will gain a lot after reading this article.

The floating of the child element will cause the box of the parent element to not be opened, and the style of the parent element can not be displayed. Clear the floating method.

Original code:

# content {border: 1px red solid;} .fl {border: 1px blueviolet solid; height: 100px; width: 100px; float: left;} .fr {border: 1px green solid; height: 200px; width: 200px; float: right } content one

Content two

The display is as follows:

1. Set the height of the parent element:

Height: 500px; / * set parent element height * / # content {border: 1px red solid; height: 500px; / * set parent element height * /} .fl {border: 1px blueviolet solid; height: 100px; width: 100px; float: left } .fr {border: 1px green solid; height: 200px; width: 200px; float: right;} content one

Content two

2. Absolute positioning of parent element: position:absolute

# content {border: 1px red solid; position: absolute; / * parent element absolute positioning * /} .fl {border: 1px blueviolet solid; height: 100px; width: 100px; float: left;} .fr {border: 1px green solid; height: 200px Width: 200px; float: right;} content one

Content two

3. Parent element sets overflow:hidden

# content {border: 1px red solid; overflow: hidden;} .fl {border: 1px blueviolet solid; height: 100px; width: 100px; float: left;} .fr {border: 1px green solid; height: 200px; width: 200px Float: right;} content one

Content two

4. Set the parent element to float: float:left/right

# content {border: 1px red solid; float: left;} .fl {border: 1px blueviolet solid; height: 100px; width: 100px; float: left;} .fr {border: 1px green solid; height: 200px; width: 200px Float: right;} content one

Content two

5. Add an empty box at the end of the child element and set the style to clear:both

# content {border: 1px red solid;} .fl {border: 1px blueviolet solid; height: 100px; width: 100px; float: left;} .fr {border: 1px green solid; height: 200px; width: 200px; float: right } .clear {clear: both;} content one

Content two

6. Adding a pseudo class to the parent element style is equivalent to adding an empty box at the end of the child element, the principle is similar to 5

# content {border: 1px red solid;} .fl {border: 1px blueviolet solid; height: 100px; width: 100px; float: left;} .fr {border: 1px green solid; height: 200px; width: 200px; float: right } # content:after {content:'; display: block; /! * height: 0transposition / clear: both;} content one

Content two

Thank you for reading this article carefully. I hope the article "several kinds of clearing floats in web development" shared by the editor will be helpful to everyone. 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.