Three ways to clear floating CSS_html/css_WEB-ITnose-HTML Tutorial-php.cn

Three ways to clear floating CSS_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:59:49

Original

1358 people have browsed it

Just talk about a few key points of float:
It only floats left and right, not up and down. After the

element is set to float, it will break away from the normal flow (same as position: absolute;), no longer occupy the space of the original layer, and will also cover the elements of the next layer.

Floating has no effect on the element's previous sibling.

After floating, the next sibling element of the element will be immediately behind the element that has not been set to float before the element (it is easy to understand, because the element is out of the ordinary flow, or is not at this level, So of course its next element must fill its position).

If there is an inline element (usually text) in the next sibling element of the element, it will be displayed around the element, creating an effect similar to "text surrounding an image". (Please refer to the explanation in the in-depth study, detailed explanation and expansion of CSS float (1))

If the next sibling element is also set to float in the same direction, it will be displayed immediately after the element.
This element turns into a block-level element , which is equivalent to setting display: block; (the same as position: absolute;) for the element.

What are the methods for clearing floats in CSS ? Floats are often used, and many evil things may be caused by floats. Clearing floats is a must, and clearing floats from parent elements at any time is also considered a good habit in writing CSS. one.

Let’s look at today’s tutorial. This is a floating source code that has not been cleared. The light yellow background of the parent element cannot be seen when running the code.

1 <style type=”text/css”> 2 <!?     *{margin:0;padding:0;}     3 body{font:36px bold; color:#F00; text-align:center;}     #layout{background:#FF9;}     #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}     #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} ?> 4 </style> 5 <div id=”layout”>     6 <div id=”left”>Left</div>     7 <div id=”right”>Right</div>8 </div>

Copy after login

1. Use empty tags Clear floating
A method I have used for a long time, the empty tag can be a div tag or a P tag. I am used to using

, which is short enough. Many people also use

, but the border needs to be cleared separately, but in theory it can be any label. This method is to add such a tag to clear float after all floating elements inside the floating parent element need to be cleared, and define the CSS code for it: clear:both. The disadvantage of this approach is the addition of meaningless structural elements.

 1 <style type=”text/css”>  2 <!?     *{margin:0;padding:0;}      3 body{font:36px bold; color:#F00; text-align:center;}     #layout{background:#FF9;}     #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}     #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;}      4 .clr{clear:both;}  5 ?>  6 </style>  7 <div id=”layout”>      8 <div id=”left”>Left</div>      9 <div id=”right”>Right</div>     10 <div class=”clr”></div> 11 </div>

Copy after login

2. Use the overflow attribute
This method effectively solves the problem The disadvantage of having to add unintentional code by clearing floats via empty tag elements. To use this method, you only need to define the CSS property: overflow:auto in the element that needs to be cleared of floating, and that's it! "zoom:1" is for compatibility with IE6.

1 <style type=”text/css”> 2 <!?     *{margin:0;padding:0;}     3 body{font:36px bold; color:#F00; text-align:center;}     #layout{background:#FF9;overflow:auto;zoom:1;}     #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}     #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} ?> 4 </style> <div id=”layout”>     5 <div id=”left”>Left</div>     6 <div id=”right”>Right</div> <7 /div>

Copy after login

3. Use the after pseudo-object to float clearly
This method only applies to non-IE browsers. Please refer to the following examples for specific writing methods. Please pay attention to the following points during use. 1. In this method, height:0 must be set for the pseudo object that needs to clear the floating element, otherwise the element will be several pixels higher than the actual one; 2. The content attribute is necessary, but its value can be empty, blue ideal discussion In this method, the value of the content attribute is set to ".", but I found that it is also possible to leave it empty.

1 <style type=”text/css”> 2 <!?     *{margin:0;padding:0;}     3 body{font:36px bold; color:#F00; text-align:center;}     #layout{background:#FF9;}     #layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}     #left{float:left;width:20%;height:200px;background:#DDD;line-height:200px;}     #right{float:right;width:30%;height:80px;background:#DDD;line-height:80px;} ?> 4 </style> 5 <div id=”layout”>     6 <div id=”left”>Left</div>     7 <div id=”right”>Right</div> 8 </div>

Copy after login

These three methods have their own pros and cons. You should choose the best when using them. Compare the second one method is preferable.