浮动布局咬一口

浮动布局

浮动是完全不同于流动的另一种布局模型，有如下特征：

• 任何定义为float的元素都会自动被设置为一个块状元素显示，可以定义宽高
• 浮动模型不会与流动模型发生冲突，在垂直方向上应该还处于文档流中
• 与普通元素意义，浮动元素始终位于包含元素内，不会游离于外，或破坏元素包含关系
• 需要清除浮动

1. 浮动布局基本使用

float 属性,有left,right两个属性值，用于标准文档流中的图文环绕，实现网页布局，简单但不一定好用。

之后的flex布局就是为了解决float布局的问题而出现的。

2.浮动布局的特点

浮动有如下三大特征：

• 包裹性
• 破坏性
• 块级框

包裹性

如果一个块级元素，在没有设置width的情况下（前提条件），一旦使用了float，那么他的width就会发生变化，尽量最小，能够完全包裹其中内容即可。

给块级元素设置width就可去除包裹性。

破坏性

在一个块级容器中（如div），如果它的子元素，都有浮动（比如float），并且没有清除这个浮动，那么块级容器将会塌陷。这就是浮动的破坏性。
如何解决塌陷呢？（去除浮动）
方法一：在块级容器中，使用overflow:hidden
overflow：溢出

作用：用于处理内容溢出的情况,也可用于出来塌陷，有如下四种属性值

visible：表示可见，它是默认值
hidden：表示隐藏
scroll：生成滚动条(水平方向，垂直方向)
auto：自动(只有垂直方向的滚动条)

方法二：在块级容器结束之前，添加一个空的div标签，然后设置clear：both的属性
很多大网站都是这样做的，包括淘宝，就是多写一下代码

方法三：显式的给块级元素指定一个height值

针对第三种解决方案，并不适用，因为对于大部分页面来说，一个容器其高度最好设置为自适应的，不推荐使用。

块级框

如果一个行内元素，设置了浮动（left或right）之后，它就会变成块级框，就可以设置其盒模型的所有属性，如width和height。
最经典的就是给a标签加浮动。

3. 浮动布局具体表现

配大图一张

4. display助攻

display：显示的意思

作用：用来设置元素的显示形态
格式：display：属性值

其中，属性值有如下几个：

block，块
inline，行内
none，隐藏
inline-block，行内块

display 可以很灵活的改变元素的显示形态

流动布局是默认的，遵循的盒模型中块级元素和行内元素的各自特点。

只要是流动布局，所有的内容都是属于正常文档流的。

如果使用了浮动布局，使用了float之后，那就不一样了。

浮动之后，它会脱离正常的文档流，但是不是完全脱离，还是会影响内容的。

由于浮动并不是完全脱离文档流的，所以浮动的元素还是需要占据空间，这个空间是不会被其它内容占据。

不是完全脱离，还是会影响内容的。

由于浮动并不是完全脱离文档流的，所以浮动的元素还是需要占据空间，这个空间是不会被其它内容占据。

配上display 整个页面可以起飞了