There are several ways to clear floats in web development
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!
