Why does css clear floats?

This article mainly introduces why css should remove the float, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand.

Cause analysis

1. The purpose of clearing floats is to remove the influence of using floating elements. A highly collapsed parent element.

If a block-level element does not have height set, its height is opened by child elements.

2. After using floating, the child element will deviate from the standard document stream, that is, there is nothing in the parent element to open its height, so the height of the parent element will be ignored.

This is called high collapse.

Example

Document .box {width: 510px; border: # 0000FF solid 1px;} .box: after {content: ""; visibility: hidden; display: block; height: 0; clear: both;} .left {float: left; width: 250px; height: 100px; background-color: green } .right {float: left; width: 250px; height: 100px; background-color: red;} .backdiv {width: 100px; height: 100px; background: # 101010; margin-left: 510px } Thank you for reading this article carefully. I hope the article "Why css removes floats" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support us and follow the industry information channel. More related knowledge is waiting for you to learn!