前言:这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方,请大家指正,我会持续更新!
文档流的概念:html中block块元素默认是单独占据一行的,从上到下排列,也就是我们说的文档流;
脱离文档流的概念:A元素定义了float属性之后,就会"浮"起来,原来占据的空间由后面的B元素占据;
如果浮动起来的A元素和B元素发生重叠,浮动起来的A元素就会覆盖B元素;
浮动元素具有内联元素的特性,不在单独占据一行,相邻的浮动元素,最前面的具有left属性值的排在最左边,最前面的具有right属性值的排在最右边;
当多个浮动元素一排容不下时,就换行;
浮动会带来各种布局问题,主要是父容器塌陷(子元素在父元素外面,影响后面的布局),也就有各种解决方案,利用clear属性清除浮动或者使父容器形成BFC;
1. 利用clear:both清除浮动
在浮动元素后面在创建一个空的非浮动的div(inline元素不可以),并赋予属性clear:both;
实际应用中我们更多采用:after伪元素加在父容器上来清除浮动,定义一个clearfix的class,然后给它添加一个:after伪元素,它会在父容器的内容最后面在添加一个看不见的块元素,我们给它定义clear:both;
/* 清除浮动 */
.clearfix:after {
content: '';
display: block;
height: 0;
clear: both;
font-size: 0;
visibility: hidden;
}
.clearfix {
/*触发hasLayout,这又涉及到IE浏览器hack的知识*/
zoom: 1;
}
2. 父容器形成BFC来解决父容器内部子元素浮动引起的塌陷问题
BFC元素特性就是不论内部怎样,都不会影响外部布局。
如何触发BFC?
- float值为left\right
- overflow值为auto\scroll\hidden
- display值为table-cell\table-captain\inline-block
- position值为absolute或fixed
我们可以给父容器添加这些属性形成BFC,达到“清”浮动(包含浮动);
div设置float属性之后会产生inline-block特性,不会占据一整行了;
position:absolute会使父容器脱离文档流,虽然打成了目的,但父容器的位置问题又来了;
overflow:auto、scroll有时候会出现滚动条;
overflow:hidden需要确定不会出现溢出裁剪,很多企业不让用overflow,我们需灵活掌握;
最后,Nicolas Gallagher大师提供了一种更简便的方法,用的是display:table;
.clearfix:before, /*:before处理margin上下重叠*/
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
这里的:before,它是来处理margin上下重叠的;
3.margin重叠的问题
上下两个div,上面的赋予margin-bottom:20px,下面的赋予margin-top:10px,那么两个div之间的间距是多少呢?
两个div之间的间距是20px,因为发生了margin重叠,两个值那个大,间距就是哪个;
上面说的是上下两个div,那么一个div在另一个div中呢?情况也是一样的,会发生重叠,只是变成了top-top,bottom-bottom重叠;
两个相邻的元素,嵌套的元素,只要它们之间没有阻挡,就会发生margin重叠;
margin重叠解决方法:
上下两个div,这种情况一般不会用到,你看效果图的时候,一般都只会给其中一个div赋予margin的,都没有颜色,你也看不出来谁是谁,上面的列子我只是说有这个情况
内外嵌套的div,很多时候会用到,
- 我们可以在它们之间加个阻碍,父元素或者子元素加个透明边框 border:1px solid transparent; 视情况可以具体到上边框还是下边框
- 父元素或者子元素加个padding:1px;视情况可以具体到上padding还是下padding
- 让父元素和子元素不在同一个BFC,视情况给它们哪个触发BFC;