浮动(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>

1. 设置元素浮动

• 使用这种元素虽然可以撑开父元素,但是会导致父元素宽度丢失.
• 这种方式也会导致下边元素上移

2. 设置元素绝对定位

• 和第一种一样不推荐

3. 设置元素为inline-block

• 直接设置会和第一种一样,也会导致宽度丢失

4. 设置overflow,将overflow的值设置成非visible的值

• 推荐将overflow的值设置为hidden,它是副作用最小的