CSS clear Floating Method, CSS clear Floating Method

CSS clear Floating Method, CSS clear Floating Method

How to clear float with CSSWhat are them? Float is often used. Many evil things may be float, and it is necessary to clear the float, it is also considered to be one of the good habits of writing CSS to clear the floating of parent-level elements at any time.
Next, let's take a look at today's tutorial. The Floating source code is not cleared, and the light yellow background of the parent element cannot be viewed when running the code.

<Style type = "text/css">
<! -
* {Margin: 0; padding: 0 ;}
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 ;}
->
</Style>
<Div id = "layout">
<Div id = "left"> Left </div>
<Div id = "right"> Right </div>
</Div>

 

 

1. Clear floating with empty tags

I have been using this method for a long time. An empty tag can be a div tag or a P tag. I am used to using <div>, which is short enough, and many people use <Style type = "text/css">
<! -
* {Margin: 0; padding: 0 ;}
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 ;}
. Clr {clear: both ;}
->
</Style>
<Div id = "layout">
<Div id = "left"> Left </div>
<Div id = "right"> Right </div>
<Div class = "clr"> </div>
</Div>

Ii. Use overflow attributes

This method effectively solves the drawbacks of adding unintentional code by clearing the floating through the empty Tag Element. To use this method, you only need to define the CSS Attribute overflow: auto in the element to be cleared !" Zoom: 1 "for IE6 compatibility.

<Style type = "text/css">
<! -
* {Margin: 0; padding: 0 ;}
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 ;}
->
</Style>
<Div id = "layout">
<Div id = "left"> Left </div>
<Div id = "right"> Right </div>
</Div>

3. Clear floating using the after pseudo object

This method is only applicable to non-ie browsers. For more information, see the following example. Pay attention to the following points during use. 1. In this method, height: 0 must be set for the pseudo object to clear the floating element; otherwise, the element will be several pixels higher than the actual one; 2. The content attribute is required, however, the value can be blank. When Blue is ideal, the value of the content attribute is set ". ", but I found that it is also possible to be empty.

<Style type = "text/css">
<! -
* {Margin: 0; padding: 0 ;}
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 ;}
->
</Style>
<Div id = "layout">

DIV + CSS to clear floating issues

Hi, buddy, you can do this.
<Meta http-equiv = "X-UA-Compatible" content = "IE = EmulateIE7"/>
Add the header to enable ie8 to execute IE7 standards

I'm dizzy. I tried it. It works, because IE8 works even if I don't write the above section.
What you mean by margin

How to clear div + css float?

1. Clear the floating div without a height by default, unless you have set the height. In the editing window, the software shows you the existence of a div, and the code remains unchanged.

2. if you want to clear floating in a format similar to <div class = "clear: both"> </div>, then you 'd better place this div behind the same-level elements with floating attributes (for example, your code is li. However, the next level of ul can only be li, so you can write it as follows: <li style = "clear: both; height: 0; visibility: hidden"> </li> ); if overflow: auto is used, this setting should be placed in the parent container with floating attribute elements (such as your ul ), in addition, this method can clear the float in non-ie and ie7 + browsers and is invalid for ie6, so you should write zoom: 1 in the settings, and use of pseudo objects (: after ). There are a lot of details about how to clear the float and the nature of the float. I hope you can check it out. Understanding more, then you will truly understand its inner and be able to control it.