您的位置：首页 > Web前端 > CSS

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

2016-07-18 13:00 477 查看

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）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 前端技术前端开发 css之float属性 float属性

相关文章推荐

新的分享

章节导航