Css clears float and css float

Css clears float and css float

Css clear floating float

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 styles

.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;}

Analyze problems: No height is set for the outer layer. If float is not set for the elements in the outer layer, the height of the outer container will be extended with the height of the inner layer element. Because the inner layer element is separated from the document stream after float is set, the height cannot be extended.

(1) The background cannot be displayed. (2) The border cannot be opened. (3) The margin value cannot be correctly displayed.

2. Clear floating

Method 1: add new elements and 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:

1. clear {clear: both; height: 0; line-height: 0; font-size: 0}
Effect:

Method 2: parent div defines overflow: auto

Html:

<Div class = "outer over-flow"> // a class <div class = "div1"> 1 </div> <div class = "div2"> 2 is added here. </div> <div class = "div3"> 3 </div> <! -- <Div class = "clear"> </div> --> </div> CSS:

Css:

. Over-flow {overflow: auto; zoom: 1; // zoom: 1; compatibility issues are being processed}

Principle: when using the overflow attribute to clear floating, note that the overflow attribute has three attribute values: hidden, auto, and visible. We can use the hiddent and auto values to clear the floating, but remember not to use the visible value. If this value is used, the floating clearance effect cannot be achieved, and the other two values can be used.

Method 3: after (Act on the father of the floating element)

Principle first: This method is one of the most popular methods on the Internet to clear the floating. It uses: after and: before to insert two element blocks inside the element, so as to clear the floating effect. The implementation principle is similar to the clear: both method, but the difference is that clear inserts a div in html. the clear label, while the outer uses its pseudo class clear: after to add a div-like inside the element. clear effect. Let's take a look at the 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==*/

Clear: both; indicates clearing all floating; content :'. '; display: block; it cannot be missing for FF/chrome/opera/IE8, and content () can be set to or empty. Visibility: hidden; allows the browser to render it, but does not display it so that it can be clearly floating.