关于css浮动和BFC的小笔记

最新推荐文章于 2022-06-08 15:15:03 发布

weixin_30278311

最新推荐文章于 2022-06-08 15:15:03 发布

阅读量72

点赞数

原文链接：http://www.cnblogs.com/photon-phalanx/p/6364834.html

版权

关于css浮动和BFC的小笔记

浮动脱离文档流，不脱离文档，所以会影响兄弟元素

<!DOCTYPE html>
<title>box</title>

<style>
 .inline-block {
 display: inline-block;
 }
 .float {
 float:left;
 }
</style>

<div>
 <div class="inline-block">
 <div>Block</div>
 </div>
 <div class="inline-block">
 <div class="float">Float</div>
 <div class="float">Float</div>
 </div>
</div>

这段是在sf上的一个问题，看了以后做摘抄笔记
不指定vertical-align时，默认基线对齐，第二个inline-block的div中，没有块级也没有文本，没有可以提取基线的地方（如全为浮动元素），此时对齐时按照元素底部对齐，而非基线，所以会导致对齐时上移
可以添加文本或者添加block解决问题
也可父元素添加浮动，浮动默认左上角对齐
可以用before伪元素，content用\200B,\00A0，即可隐藏文字

<div class="test" style="width: 800px;">
 <div style="float: left;width: 200px;height: 200px;"></div>
 <div style="width: 300px">123</div>
 <div>456</div>
</div>

 <div class="test" style="width: 800px;">
 <div style="float: left;width: 200px;height: 200px;"></div>
 <div style="width: 200px">123</div>
 <div>456</div>
 </div>

这两段是有区别的，上面这段，123的div会在浮动div的右边，长度表现出100px
下面这段，123的div会在浮动div的下边，长度表现出200px
也就是说块级元素可能被兄弟的浮动元素覆盖
解决方案？BFC

清除浮动的方法，2类
1.css clear
2.BFC

创建BFC的方式
1.float 当然不为none
2.定位，absolute，fixed，relative
3.overflow hidden auto scroll
4.display inline-blocks table-cells (table) table-caption

BFC有什么用
1.在父元素上写overflow:hidden等，可以让子元素有float的不会导致父元素坍塌
2.如前面所说，可以阻止被浮动元素覆盖
3.相邻元素只要有一个有BFC，外边距不会叠加

转载于:https://www.cnblogs.com/photon-phalanx/p/6364834.html

weixin_30278311

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于css浮动和BFC的小笔记

关于css浮动和BFC的小笔记浮动脱离文档流，不脱离文档，所以会影响兄弟元素<!DOCTYPE html><title>box</title><style> .inline-block { display: inline-block; } .float { float:left; }</style><div&gt...
复制链接

扫一扫