float／clear float的问题总结 (⌒▽⌒)

来源：互联网发布：java布尔型变量编辑：程序博客网时间：2024/06/06 18:47

float这个属性我觉得确实撩人，很麻烦，看了很多资料，还是对它的概念停留在脱离文档流，不再占用空间的程度上。

其实也没有这么复杂，最重要的是掌握，

使用float属性以后这个块元素就：不和在文本流之中的元素在一个平面上了，而是在文档流的块元素之上，但在行内元素之下。

之后的块元素会排列时仍在下层文档流中进行排列，受到上一个元素float的影响，会补上float元素的位置，所以我们会看到它向上排列。

下面我要插入一个实例来帮助大家理解哦＊—＊

<!DOCTYPEhtml><htmlxmlns="http://www.w3.org/1999/xhtml"><head>    <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />    <title>form ex</title>    <style type="text/css">     #left {height:150px;width:100px;background-color: pink;float: left;}    #right{height:200px;width:200px;background-color: orange;}     </style></head><body>    <divid="header"></div>    <div id="left"><p>该在这也写什么呢？？？</p></div>    <div id="right"><p>长江长江，我是黄河。黄河黄河，我也是黄河。。。。</p></div>    <divid="footer"></div></body></html>

可以很清楚的看到，黄色的盒子被float的粉色盒子盖掉一部分了，这就是因为粉盒子在橙色盒子的上面了（这就是不属于文档流了～），因此，在下层文档流中橙色盒子布局的时候就代替了它原来的位子，顶着浏览器的左边和顶部排列。

但又因为float最初就是为了实现文字环绕效果（环绕图片），所以尽管橙色盒子被粉盒子遮盖了，橙色盒子里的文字却完美的实现了对粉盒子的环绕，并没有被遮盖。

总结一下Float的几大属性

1. 对未设置width的块元素使用float属性后，盒子不会在占满整个屏幕，而是以自适应内容的宽度显示。以下对比设置了float属性的粉盒子。

未对粉盒子设置float属性：

对粉盒子设置float属性后：

2. 使用float属性以后这个块元素不和在文本流之中的元素在一个平面上了，而是在文档流之上。之后在文本流中的块元素，会补上float元素的位置，所以我们会看到它向上排列。

3. 受float属性影响（会一定程度覆盖）下一个元素的盒子，而下个块元素中文字会出现环绕效果。

4. 使用float后仍旧可以使用margin属性，但是margin：0 auto的居中方法不再有效。

5. 对子包含块设置float只是对父类有影响（float以后子类无法撑开父类）需要利用overflow:hidden属性清除浮动。但对父类之后的块元素无影响。

再说清除浮动。

1.清除浮动：对受到影响的元素设置“clear:both;”；清除左浮动：“clear:left;”；清除右浮动：“clear:right;”(左右浮动需要判断元素是左侧浮动还是右侧浮动)【作用于：紧随浮动元素其后元素的浮动清除】

2.清除浮动：“width:100%(或固定宽度)+overflow:hidden”【应用于：父包含块不浮动，子包含块浮动后导致父包含块高度不能随内容为扩充，使用这个浮动清除解决】

<!DOCTYPE html><htmlxmlns="http://www.w3.org/1999/xhtml"><head>   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />   <title>form ex</title>   <style type="text/css">        #k{background-color: pink;width: 560px;}   #b{width: 20%;background-color:grey;margin-right: 20px;}   </style></head><body>   <div id="k">   <div id="b">      <p>you!</p>   </div>   </div></body></html>

灰色盒子为子包含块，粉盒子为父包含块；未对子包含块设置样式时，可以看到子包含块自动的撑开了父包含块。

设置子包含块float之后，可以看到父包含块没有被撑开了。

对父包含块利用overflow：hidden清除浮动后，子包含快再次撑开父包含块。

3.加<br/>标签实现，不建议使用，加入了无意义标签。

4.建议：div块不设置高度（见2）

0 0