CSS tips: Clear floating

1. Common Methods--overflow

Add Overflow:hidden to the container of the floating element, or overflow:auto; You can clear the float, and you also need to trigger haslayout in IE6, such as setting the container width height for the parent element or setting zoom:1.

However, it cannot be used in conjunction with position because the size of the excess will be hidden.

Overflow:auto the scroll bar appears when the internal width exceeds the parent element.

After adding the overflow attribute, the floating element goes back to the container layer, and the container is propped up to achieve the effect of cleaning and floating.

2. The ultimate method-pseudo element

If you encounter a horizontal list of two sub-menus that need to be displayed as a condition, using overflow will affect the headset menu.

This is the time to set the pseudo-element on the element that needs to clear the float: after,:before

<ul class= "Menu" > <li><a href= "#" > Home </a></li> <li><a href= "#" > Course Hall                </a> <ul> <li><a href= "#" >JavaScript</a></li> <li><a href= "#" >jQuery</a></li> </ul> </li> <li><a                href= "#" > Learning Center </a> <ul> <li><a href= "#" > Video Learning </a></li> <li><a href= "#" > Case Study </a></li> <li><a href= "#" > Communication Platform </a>        </li> </ul> </li> <li><a href= "#" > Classic case </a></li> <li><a href= "#" > About Us </a></li> </ul>

<style>
menu:before,.menu:after{/* Clear Floating Ultimate solution */
Content: ";
The value of Display:table;/*display can also be block*/
}
. menu:after{
Clear:both;
}
</style>

3. Available but not recommended method-floating element parent container also adds floating property

<ul class= "Menu" >        <li><a href= "#" > Home </a></li>        <li><a href= "#" > Course Halls </a>            <ul>                <li><a href= "#" >JavaScript</a></li>                <li> <a href= "#" >jQuery</a></li>            </ul>        </li>        <li><a href= "#" > Learning Center </a>            <ul>                <li><a href= "#" > Video learning </a></li>                <li><a href= "#" > Case Study </a></li>                <li><a href= "#" > Communication platform </a></li>            </ul >        </li>        <li><a href= "#" > Classic case </a></li>        <li><a href= "#" > About Us </a></li>    </ul>

<style>

. menu{
width:960px;margin:60px Auto;
border:1px solid #222;
Background-color: #111;
Background-image:linear-gradient (#444, #111);
border-radius:6px;
box-shadow:0 1px 1px #777;
float:left;/* floating elements also add floating properties */
}

}

</style>

3.1. Available but not recommended method-Fixed parent Element Height property

Principle: The parent div manually defines the height, which solves the problem that the parent Div cannot automatically get to the heights.

It is only suitable for highly fixed layouts, to give a precise height, which can be problematic if the height is different from the parent Div.

3.2. Available but not recommended method-add empty div at the end and set Clear:both

Principle: Add an empty div, use CSS to improve the clear:both clear floating, so that the parent div can automatically get to the height

Not prone to strange problems, but there will be a lot of space, the previous common solution.

<style type= "Text/css" >. Div1{background: #000080; border:1px solid red}. Left{float:left;width:20%;height : 200px;background: #DDD}. Right{float:right;width:30%;height:80px;background: #DDD}. Clearfloat{clear:both} </ style>  <div class= "Div1" >          <div class= "left" >Left</div>          <div class= ' right ' > Right</div>  

3.3, available but not recommended method--end plus <br/>

<style type= "Text/css" >. Div1{background: #000080; border:1px solid red;margin-bottom:10px;zoom:1}. Left{float: Left;width:20%;height:200px;background: #DDD}. Right{float:right;width:30%;height:80px;background: #DDD}. Clearfloat{clear:both} </style>   <div class= "Div1" >           <div class= "left" >Left</div>           <div class= "right" >Right</div>            

　　

CSS tips: Clear floating