purpose

In order to solve the page display style need text around the image scenario.

Before the floating

After the floating:

Img {float:left} <div> <img SRC =" XXX "> <span>Copy the code

Floating defects

The height collapse is caused by the element leaving the standard flow when float is set, as shown in the following example

When a height collapse occurs, elements intended to be placed below are automatically replenished upward. ,

The solution

Use the clear property to clear the float
Set an element at the end of the sibling element that sets float with the clear property.
<style type="text/css"> .div1{ height:100px; width:100px; background:blue; float:left; } .div2{ height:10px; width:300px; background:red; } .clearfix{ clear:both; } </style> <main> <div class="div1"></div> <p> Here is a paragraph </p> <table class="clearfix"></table> </main> <div class="div2"></div>Copy the code
Using pseudo-elements
main::after{
   content:"";
   display:table;
	clear:both;
}
Copy the code
New landing

Principle: When the parent element creates a NEW BFC, its height calculation will include the floating child element.

.main{
overflow:hidden;
}
Copy the code