关于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