CSS 浮动float布局

传统网页布局的三种方式

• 普通流（标准流/文档流）

所谓的标准流，就是标签按照规定好默认方式排列，是最基本的布局方式
1.块级元素会独占一行从上向下顺序排列
2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行

• 浮动
• 定位

什么是浮动？

float属性用于创建浮动框，将其移动到一遍，知道左边缘或右边缘触及包含块或另一个浮动框的边缘

浮动特性

• 浮动元素会脱离标准流（脱标），不再保留原先的位置(队伍中间少了一个人，后面的人往上顶)
• 浮动的元素会一行内显示并且元素顶端对齐
• 浮动的元素具有行内块元素的一些特性

行内元素直接设置宽高是无效的!

如果行内元素有了浮动，则不需要转换块级或者行内块级元素 就可以直接给宽度高度
如果块级盒子没有设置宽度，默认宽度和父级一样宽。
浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

---

浮动布局的注意点

1.浮动和标准流的父盒子搭配
2.一个元素浮动了，理论上其余的兄弟元素也要浮动，以防引起问题

== 浮动的盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流 ==

清除浮动

问题来源：
浮动元素有一个标准流的父元素，但是当父元素没有高度时，就会出现问题。
当元素是非浮动的时候，父盒子不给高度，他的高度会根据子元素实际内容的高度自动变化撑开盒子。但是当子元素都是浮动元素时，会脱离标准文档流，不占有位置，即他的父元素盒子的高度为0，进而影响下面的标准流元素。
很多情况下，父级盒子不方便给高度，这个时候，就需要清除浮动。

清除浮动的本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父级元素本来就有高度，则不需要清除浮动
• 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。

语法

选择器{clear:属性值}

属性值	描述
left	不允许左侧有浮动元素（清除左侧浮动的影响）
right	不允许右侧有浮动的元素（清除右侧浮动的影响）
both （工作中最常使用）	同时清除左右两侧浮动的影响

清除浮动的策略是：闭合浮动

---

清除浮动的4种方法

1.额外标签法/隔墙法 ，是W3C推荐的做法（不常用）
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素

1.** 额外标签法 **会在浮动元素的末尾添加一个空的标签。（**要求这个空标签必须是块级元素 **）例如

<div style="clear:both"> </div>

或者其他标签 如<br>等

2.**父级添加overflow**，将其属性设置未hidden,auto或者scroll （外边距塌陷也是使用的此方法）

3.**:after 伪元素** 额外标签的升级版 也是给父元素添加 堵后面

.clearfix :after{
	content:"";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.clearfix {	/* d兼容IE6 IE7*/
	*zoom:1;
}

优点：没有增加标签，结构更简单
缺点：需要照顾低版本浏览器
代表网站：百度，淘宝网、网易等

4.**双伪元素** 给父级添加 堵两边

.clearfix :before .clearfix :after{
	content:"";
    display:table;
}
.clearfix :after{
	clear:both;
}
.clearfix {	/* d兼容IE6 IE7*/
	*zoom:1;
}

---

CSS属性书写顺序

建议遵循以下顺序：
1.布局定位属性：display/position/float/clear/visibility/overflow(display关系到模式，建议第一个写)
2.自身属性：width/hight/margin/padding/border/background
3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
4.其他属性（CSS3）:content/cursor/border-radius/box-shadow/text-shadow/background:linear-gradient…