浮动(CSS float 属性)
首先浮动这个概念是CSS1中提出的，浮动不完全是定位，但他也不是normal flow。
我认为浮动的元素会变成一个属于自己的流,就好像小弟不跟大哥了,自己成立新帮派一样.
值: left | right | none | inherit
默认值: none
应用: 所有元素
继承性: 无
为什么清除浮动元素(使用了CSS float属性的元素)
<b>在元素中，如果父元素的高度是由内部元素撑起的，而这个内部元素又进行了浮动（脱离常规流），就会发生父元素高度塌陷的问题。而为了解决这种问题，就要清除浮动。</b>
比如我们想把这三个块级元素用float实现类似inline-block的正常流的效果.
3.png
想要实现的效果
2.png
实际效果,用float,父元素高度会塌陷
1.png
一.利用clear解决问题
看下图的代码,我在parent里内容元素的最后面添加了一个空的div,样式属性设置了clear:both;<b>父容器发现了样式为clear:"both"的div元素,定义了这个div两侧不浮动,既然两侧不能出现浮动元素,那么该div需要换行.而父元素要确保它能够换行就要包含浮动元素的高度,让它有足够的空间.</b>
4.png
二.:after(伪类选择器)
为parent追加一个伪类元素,原理和添加空元素差不多
.parent:after{
content:"";
display:table;
clear:both;
}
三.BFC(Block Formatting Context)
<b>每一个元素,都有一个叫BFC的隐藏属性
开启BFC的元素会有如下特性</b>
- 父元素的垂直外边距不会和子元素重叠
- BFC元素不会被浮动元素覆盖
- BFC元素可以包含浮动子元素
<b>怎么开启BFC</b>
- 设置元素浮动
- 使用这种元素虽然可以撑开父元素,但是会导致父元素宽度丢失.
- 这种方式也会导致下边元素上移
- 设置元素绝对定位
- 和第一种一样不推荐
- 设置元素为inline-block
- 直接设置会和第一种一样,也会导致宽度丢失
- 设置overflow,将overflow的值设置成非visible的值
- 推荐将overflow的值设置为hidden,它是副作用最小的
