元素浮动定义
float 属性定义元素在哪个方向浮动. 以往这个属性总应用于图像, 使文本围绕在图像周围, 不过在 CSS 中, 任何元素都可以浮动. 浮动元素会生成一个块级框, 而不论它本身是何种元素.
如果浮动非替换元素, 则要指定一个明确的宽度; 否则, 它们会尽可能地窄.
注释: 假如在一行之上只有极少的空间可供浮动元素, 那么这个元素会跳至下一行, 这个过程会持续到某一行拥有足够的空间为止.
why 子元素浮动 会导致父元素 高度塌陷?
这是因为内部的元素设置 float:left || right 后, 就丢失了 clear:both 和 display:block(持怀疑态度) 的样式, 所以外部的父容器不会被撑开.
举个:
子元素未设置浮动, 父元素自动被撑开
- <body>
- <div class="father">
- <div class="son"></div>
- </div>
- </body>
- <style>
- .father {
- width: 400px;
- border: 1px solid blue;
- }
- .son {
- width: 200px;
- height: 200px;
- border: 1px solid red;
- background-color: yellow;
- }
- </style>
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
子元素设置浮动, 父元素高度塌陷
- <body>
- <div class="father">
- <div class="son"></div>
- </div>
- </body>
- <style>
- .father {
- width: 400px;
- border: 1px solid blue;
- }
- .son {
- width: 200px;
- height: 200px;
- border: 1px solid red;
- background-color: yellow;
- float: left;
- }
- </style>
闭合浮动的常见解决方案
最终, 我们要的效果是要跟没设置浮动之前的效果一样, 让父元素高度自适应:
在浮动元素之后添加清除浮动的子元素:
- <div class="father">
- <div class="son"></div>
- <div class="clearFloat"></div>
- </div>
- <style>
- .father {
- width: 400px;
- border: 1px solid blue;
- }
- .son {
- width: 200px;
- height: 200px;
- border: 1px solid red;
- background-color: yellow;
- float: left;
- }
- .clearFloat {
- width: 100%;
- height: 0;
- clear: both;
- }
- </style>
Web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
父元素设置 overflow: hidden
- <div class="father">
- <div class="son"></div>
- </div>
- <style>
- .father {
- width: 400px;
- border: 1px solid blue;
- overflow: hidden;
- }
- .son {
- width: 200px;
- height: 200px;
- border: 1px solid red;
- background-color: yellow;
- float: left;
- }
- </style>
是不是很神奇! 因为子元素的浮动, 会导致父元素误认为 content 高度为 0(即蓝色边框为一条线), 所以父元素设成 overflow:hidden 溢出隐藏的话, 直觉上应该子元素由于溢出导致不显示才对. 但真实效果是: 父元素设成 overflow:hidden 溢出隐藏后, 父元素高度居然自适应了! 这是怎么回事呢? 是因为 BFC(Block Formatting Context), 感兴趣的童鞋, 点击链接了解一下哈...
用 :after 伪元素, 思路是用: after 元素在 div 后面插入一个隐藏文本 ".", 隐藏文本用 clear 来实现闭合浮动
- .father:after {
- clear: both;
- content: "."; // 任意文本如 "dfgdfg"
- display: block;
- height: 0; // 高度为 0 且 hidden 让该文本彻底隐藏
- visibility: hidden;
- }
来源: http://www.jianshu.com/p/8d1021095e5e