前言：这是笔者学习之后自己的理解与整理。如果有错误或者疑问的地方，请大家指正，我会持续更新！
文档流的概念：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值为leftright
- overflow值为autoscrollhidden
- display值为table-celltable-captaininline-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；
- 还没有人评论，欢迎说说您的想法！
客服
