Some methods to clear floating float in css

css clear floatanimationfloat

##1. Analyze HTML code

<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
</div>

Analyze css code style

.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}.div1{width: 80px;height: 80px;background: red;float: left;}.div2{width: 80px;height: 80px;background: blue;float: left;}.div3{width: 80px;height: 80px;background: sienna;float: left;}

Analysis problem: The height of the outer layer is not set. If the inner element is not set to float, the height of the outer container will be expanded according to the height of the inner element. Because after setting float, the inner element breaks away from the document flow, resulting in a height that cannot be expanded

　(1) The background cannot be displayed (2) The border cannot be stretched (3) The margin setting value cannot be displayed correctly

2. Clear the float

Method 1: Add new elements Apply clear: both

##html:

1 <div class="outer">2     <div class="div1">1</div>3     <div class="div2">2</div>4     <div class="div3">3</div>5     <div class="clear"></div>6 </div>

css:

 {:;:;:;:}

Method 2: Parent div definition overflow:auto

## html:

<div class="outer over-flow"> //这里添加了一个class<div class="div1">1</div><div class="div2">2</div><div class="div3">3</div><!--<div class="clear"></div>--></div>CSS：

css:

.over-flow{overflow: auto; zoom: 1; //zoom: 1; 是在处理兼容性问题}

Principle: Use the overflow attribute to clear floats. One thing to note is that the overflow attribute has three attribute values: hidden, auto, and visible. We can use hidden and auto values ​​to clear floats, but remember not to use visible values. If you use this value, you will not be able to clear the floats. The other two values ​​​​can.

Method 3 :after method (acts on the parent of the floating element)

Let’s talk about the principle first: This method of clearing floats is the most popular one on the Internet. To clear floats, he uses :after and :before to insert two element blocks inside the element to achieve the effect of clearing floats. The implementation principle is similar to the clear:both method, except that: clear inserts a div.clear tag in html, while outer uses its pseudo-class clear:after to add an effect similar to div.clear inside the element. Let’s take a look at its specific usage:

.outer {zoom:1;}    /*==for IE6/7 Maxthon2==*/.outer :after {clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}   /*==for FF/chrome/opera/IE8==*/

where clear:both; refers to clearing all floats; content: '.'; display:block; for FF/chrome/opera/IE8 cannot be missing, in which content() can have a value or be empty. The function of visibility:hidden; is to allow the browser to render it but not display it, so that clear floating can be achieved.

The above is the detailed content of Some methods to clear floating float in css. For more information, please follow other related articles on the PHP Chinese website!