inline-block的特性:
1.使块元素在一行显示
2.使内嵌支持宽高
3.换行产生被解析成空格
4.不设置宽度的时候内容撑开
浮动float的特性:
1.使块元素在一行显示
2.使内嵌元素支持宽高
3.不设置宽度的时候内容撑开
4.脱离文档流
元素加了浮动,会脱离文档流,按照指定的一个方向移动直到碰到父级边界或另一个元素就停止
5.层级提升半层
对比定位来说,定位是提升一层的层级,同时也是脱离了文档流的
清除浮动的方法:开启BFC(Block Format Context)
启动BFC的必要条件如下:
float属性不为none //也就是开启float
position为absolute或fixed //开启定位
overflow不为visible //打开overflow
display为inline-block,table-cell,table-caption,felx,inline-flex
清除浮动的方法二:给浮动元素的父元素添加css内容:clear:both
清浮动总结:
1.给父元素加高:拓展性不好,随时都需要改动
2.父级也加浮动:margin自动失效
3.inline-block:本身并不脱离文档流,但margin效果也没有
4.在浮动元素下添加<div class="clear">,然后在css里利用clear:both解决
5.与第四条不同做法相同作用:在div浮动元素内添加:<br clear="all">,但不符合W3C规则,改变了样式,结构分离的规则
6.伪类做法:after:{content:"";display:block;clear:both;}
准确做法:
style:
.clear:after{
content:"";
display:block;
clear:both;
}
.clear{
zoom:1;
}
#son{
float:left;
}
html:
<div id = "father" class="clear">
<div id="son"></div>
</div>