CSS float and clear

<pre name= "code" class= "HTML" >

1. The history of floating

Do you know? The first floating intention is to achieve the effect of text wrapping, similar to a picture in the upper left corner, and then it is surrounded by text around it, this scene I believe everyone has seen it! However, floating derivative so far, we need to use its place is too much, the most commonly used is the implementation of navigation, there are other aspects of the application, such as one-sided fixed, the other side of the adaptive and so on (this will be an example below), the following will be divided into several aspects of floating to do the introduction.

2. Impact of floats

Believe that the float property is the front-end engineer Transduction must have a style effect, if you have not used, hehe!!! This article is not for you. Everyone in the use of cool at the same time, have not thought it will bring the problem! Yes, floating is a double-edged sword, use it to achieve the desired effect is very cool, but if the use of improper will be self-eating its consequences.

First of all, you need to know that any addition to the float is not a property of the element, its display will become block, that is, the floating element is a block-level element, no matter what it is!

Second, we must understand that floating will cause the collapse of the parent element, there is an official statement is BFC (block format context), as to why this, we can go to the relevant information. How to solve this problem, the nature is clear floating, that is clear.

But the clear float is not just a property with clear, because it involves the compatibility of the browser, the standard and the method used is the following method:

. Clearfix{*zoom:1;}. Clearfix:after{display:table;clear:both;content: ';}

Clearly floating with these properties is sufficient, and compatible with ie7+ and other Web browsers, here is the Zoom property, this property is only IE7 and below the effect.

3. Effects of floating implementations

First say the left fixed, the right adaptive layout, code and the following:

<style>body {font-size:14px; Background-color: #DDF3F7; color: #333;}. Clearfix{*zoom:1;}. Clearfix:after{display:table;clear:both;content: ';}. wrap{width:500px;height:30px;line-height:30px;margin:20px Auto;}. left{float:left;width:100px;margin-right:10px;border:1px solid #ddd;}. rightbox{margin-left:115px;} </style>
：



This way, regardless of the width of the outermost p, the width of the left is constant, and only the width of the right side changes automatically.

There is another way to implement this:


<style>body {font-size:14px; color: #333;}. Clearfix{*zoom:1;}. Clearfix:after{display:table;clear:both;content: ';}. wrap{width:500px;height:30px;line-height:30px;margin:20px Auto;}. left{float:left;margin-right:10px;border:1px solid #ddd;}. Rightbox{display:table-cell;*width:auto;*display:inline-block;} </style>
The second one is based on the left side of the width of the adaptive example, you can run to see.