浮动
1 浮动概念
如果想实现网页中排版布局，比如一行内显示对应的标签元素，可以使用浮动属性。浮动可以实现元素并排。
块转行内日块也可以实现一行显示,不过存在空白折叠现象
float 浮动
属性值
描述
none
表示不浮动，所有之前讲解的HTML标签默认不浮动
left
左浮动
right
右浮动
inherit
继承父元素的浮动属性
#当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素
浮动的现象
我们之前说浮动的设计初衷是为了做”文字环绕效果“。那么我们就来看一下如果对盒子设置了浮动，会产生什么现象？
浮动的元素脱离了标准文档流，即脱标
浮动的元素互相贴靠
浮动的元素会产生”字围“效果
浮动元素有收缩效果
标准文档流
文档流指的是元素排版布局过程中，元素会默认自动从左往后，从上往下的流式排列方式。
即不对页面进行任何布局控制时，浏览器默认的HTML布局方式，这种布局方式从左往右，从上往下，有点像流水的效果，我们称为流式布局。
2. 浮动带来的问题
浮动的元素脱离了标准文档流，即脱标
浮动的元素互相贴靠
浮动的元素会产生”字围“效果
浮动元素有收缩效果
当浮动元素没有设置尺寸,会适应浮动元素内的子元素尺寸
浮动的元素不占尺寸,标准流元素可以撑起父级块的尺寸,浮动元素不可以
浮动元素设置margin_top不会发生塌陷现象
给标准流元素设置margin-top时会发生margin塌陷
3 .清除浮动问题的方式
给浮动元素添加父级块,并设置父级块高度;
不宜维护,不灵活
应用:万年不变导航栏,固定栏;
内墙法: 给最后一个浮动元素的后面添加一个空的块级标签,并且设置标签的属性为 clear:both;
冗杂,浪费资源(不推荐)
伪元素清楚法(推荐)
在盒子上末尾加一个占位空的块级标签;
.pa::after{
content:''
display: block;
clear: both;
}
overflow: hidden;清楚法 (常用)
# overflow: hidden(超出隐藏) vidible(默认-可见) scroll(滚动显示)
在父级盒子上设置一个overflow: hidden;
#注意:hidden(超出隐藏)!!
4. BFC(只摘出一小部分以供参考)
BFC生成规则
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float 元素重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算
哪些元素会生成BFC
1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block
5.overflow不为visible