16 浮动
作者：互联网
标准文档流，又叫普通流
文档流的布局方式：从左到右，从上到下
脱标：
什么叫脱离文档流？，浮动后的块状元素是行内元素吗？
脱标是什么：
元素脱标后，浮在标准流上层，后面的元素对象，就视它不存在
注意，只有绝对定位absolute、浮动float、固定定位才会脱离文档流！
脱标后的，部分无视和完全无视的区别？
部分无视：使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围。
完全无视：对于使用绝对定位脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。
如果对盒子没有指定宽高，那么盒子的宽高，由其子元素来撑开
什么时候用内边距 什么时候用外边距
绝大多数情况下可以混用，想用什么就用什么，但是总有一个
最好用的，建议
优先使用width （内容的宽度）> padding > margin
margin调整元素位置
三种布局 标准流 浮动 定位
浮动
为什么：
就是为了文字环绕，后来可以让块状元素并排
怎么浮动的：
float:left 或float:right
浮动过程：
元素从当前位置为浮起来，离开原来的位置，左右浮动， 浮动元素的外边缘碰到包含框或另一个浮动元素的边框为止
*****口诀：浮动，先浮后动；
特点 ：
1 浮动的元素脱离标准文档流，脱标后不占用文档空间，后面的盒子前移
2 浮动的元素不能撑开父亲 ，宽度不够会把浮动元素往下挤，别卡住了
3、子盒子浮动 不会压住父盒子的padding和margin,只会在内容范围内浮动
4、浮动元素改变元素的模式,无论行内元素还是块级元素 设置浮动后都具有行内块元素特性
* 竖直方向的margin塌陷现象消失
只有标准流中才有margin塌陷情况
* 字围现象
图片和文字搭配的时候，图片浮动，文字不浮动，会造成字围现象
* 清除浮动方法
为什么要清除浮动？
浮动元素会对后面的元素有影响，后面的盒子会无视浮动的元素，会上移，对布局产生影响。为了不影响后面的元素，所以要求浮动的元素也要占用文档空间，所以要清除浮动
1 给父亲增加高度(有高度的盒子可以关住浮动)-------不推荐
缺点：实际工作中很少给父亲直接加高度，一般都是由儿子撑开
并不能清除浮动对后面的影响，因为对父元素设置宽高，只是增加了父元素的宽高，看起来把父元素撑开了，实际没撑开，只是看上去好像撑开了。而且字环绕现象还是存在的。
2 clear: both
clear: both的作用能清除之前的浮动元素对本元素的影响，也清除了浮动对它后面元素的影响
3 隔墙
外墙
清除浮动元素后，浮动元素对本元素和后面元素没有影响了，但是浮动元素对他的父元素还是有影响的，因为父元素没有清除浮动，所以浮动元素撑不开父元素
内墙
内墙元素后面是父元素，所以清楚浮动后对父元素无影响，所以撑开了父元素
把clear: both写在一块div中然后进行隔离
4 overflow:hidden
解决方案 偏方，在父元素中增加 overflow:hidden
overflow:hidden 本意 让多余的内容隐藏
5、使用伪元素
/*伪元素产出的是行内元素*/
.clearfix::after {
content: "."; /*尽量加不要空 */
display: block; /*转块元素*/
clear: both; /*清除浮动*/
height: 0; /*高度为0*/
visibility: hidden;/*隐藏盒子*/
}
.clearfix {
*zoom: 1; /* zoom是ie6 7 清除浮动用的属性
*表示该属性只有ie6 7 识别
*/
}
6、 v 双伪元素 （推荐使用）
/* 推荐使用 代码简洁*/
.clearfix:before,
.clearfix:after {
content: "";
display: table; /* 触发BFC BFC可以清除浮动*/
}
.clearfix:after {
clear: both;
}
标签：浮动,盒子,16,清除,元素,撑开,文档 来源： https://www.cnblogs.com/xuanjian-91/p/10986998.html