标签：
float 属性：
定义元素向哪个方向浮动。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。Float的属性值可以为：left、right、none、inherit等。
注意：
假如在一行上不够容纳整个浮动元素，则该元素会自动跳到下一行，依次往下跳，直到空间足够为止。
例如：
<style> .content{ width:800px; float:left; border:1px solid #000; } .left,.right{ width:500px; height:200px; border:1px solid #666; } .left{ float:left; } .right{ float:right; } </style> <body> <div class="content"> <div class="left">向左浮动</div> <div class="right">向右浮动</div> </div> </body> // 元素right最终在left下方。
1.float元素挡住了普通元素。
例如：
<style> .content{ height:600px; border:1px solid #CCC; } .left{ width:20%; height:400px; float:left; border:1px solid #CCC; } .right{ width:20%; height:400px; float:right; border:1px solid #CCC; } .main{ margin-left:21%; margin-right:21%; height:200px; border:1px solid #CCC; } .footer1{ height:100px; border:1px solid #CCC; } </style> <body> <div class="content"> <div class="left">left</div> <div class="right">right</div> <div class="main">main</div> <div class="footer1">footer没有清除浮动的状态</div> </div> </body> // left和right元素将漂浮在footer1元素上面，挡住了footer1的左右。
解决方法：采用clear属性清除浮动。
例如：
<style> .content{ height:600px; border:1px solid #CCC; } .left{ width:20%; height:400px; float:left; border:1px solid #CCC; } .right{ width:20%; height:400px; float:right; border:1px solid #CCC; } .main{ margin-left:21%; margin-right:21%; height:200px; border:1px solid #CCC; } .footer2{ height:100px; clear:both; border:1px solid #CCC; } </style> <body> <div class="content"> <div class="left">left</div> <div class="right">right</div> <div class="main">main</div> <div class="footer2">采用clear清楚浮动后的状态，footer元素出现在底端而且上面有float元素</div> </div> </body>
2.普通元素包含了浮动元素时，如果浮动元素高大于普通元素，则浮动元素将会溢出普通元素的范围。
注意：接下来的例子均以浮动一张较大的图片为例，可以自行链接一张图片。
例如：
<style> img{ float:left; } h1{ border:1px solid #000; } </style> <body> <div class="content1"> <h1><img src="img.jpg" />未处理</h1> <p>如果非浮动元素中有高于它的浮动元素时，浮动元素会超出非浮动元素的范围。 例如：图片高度超出了h1标签的高度</p> </div> </body>
解决方法1：加大父级元素高度，但扩展性不好，因为有时不能完全确定浮动元素的宽高。
<style> img{ float:left; } h1{ height:300px; border:1px solid #000; } </style> <body> <div class="content"> <h1><img src="img.jpg" />加大父级元素高度。</h1> </div> </body>
解决方法2：采用设置浮动元素的父级元素。
<style> img{ float:left; } h1{ float:left; border:1px solid #000; } </style> <body> <div class="content"> <h1 class="h1float"><img src="img.jpg" />采用设置浮动元素的父级元素</h1> </div> </body>
解决方法3：采用在浮动元素尾部增加设置了浮动的br元素。
<style> img{ float:left; } h1{ border:1px solid #000; } br{ clear:both; } </style> <body> <div class="content"> <h1><img src="img.jpg" />采用增加设置浮动的br标签<br /></h1> </div> </body>
解决方法4：采用给父级元素加overflow。
<style> img{ float:left; } h1{ overflow:hidden; border:1px solid #000; } </style> <body> <div class="content"> <h1 class="h1overflow"><img src="img.jpg" />采用给父级元素加overflow</h1> </div> </body>
解决方法5：加类名clear，采用after伪类统一处理。（比较推荐）
<style> img{ float:left; } h1{ border:1px solid #000; } .clear:after{ content:""; display:block; clear:both; } </style> <body> <div class="content"> <h1 class="clear"><img src="img.jpg" />加类名clear，采用after伪类统一处理</h1> </div> </body>
解决方法6：采用dispay:inline-block;但是margin：auto会失效。
<style> img{ float:left; } h1{ display:inline-block; border:1px solid #000; } </style> <body> </div> <div class="content"> <h1 class="h1dispay"><img src="img.jpg" />采用dispay:inline-block;</h1> </div> </body>
标签：
原文地址：http://www.cnblogs.com/chuqin/p/5303324.html
