CSS基础学习04（浮动）

（一）、浮动
如何让那个多个水平排列成一行？
如何实现盒子的左右对齐？
行内块元素之间是有缝隙的，这个缝隙很难去掉

浮动的作用：
（1）让多个盒子（div）水平排列成一行，使得浮动成为布局的重要手段
2、实现盒子的左右对齐
3、浮动最早是用来控制图片，实现文字环绕图片的效果
语法：float:属性值
none:没有
left:左浮动
right:右浮动
浮动的元素不占有原来的位置，俗称“脱标”
特点：（1）、浮动元素会改变元素display的属性
（2）任何元素都可以浮动，浮动元素会生成一个块级框，而不论它本身是何种元素，生成的块级框和我们前面的行内块极其相似，但是他们之间没有缝隙，

注意：浮动是脱标的，会影响下面的标准流元素，因此我们需要给浮动的元素添加一个标准流父亲。
浮动要写在最前面
浮动的元素是互相贴靠在一起的，如果宽度装不下这些则就会另起一行来显示

总结：
1、以后看到一排一排的，很整齐，用li列表来最合适
2、实际重要的导航栏中，我们不会直接用链接a，而是用li包含链接（li+a)的做法
原因：li+a语义更清新，一看这就是有条理的列表型内容，
如果直接用a，搜索引擎容易辨别为有堆砌关键字嫌疑（故意堆砌关键字容易被搜索引擎有降权的风险），从而影响网站排名
2、浮动元素与父盒子的关系
（1）、子盒子的浮动参照父盒子堆砌
（2）、不会与父盒子的边框重叠，也不会超过父盒子的内边距

3、浮动元素与兄弟盒子的关系
浮动的盒子，只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流
注意：在多个盒子里面，如果一个盒子浮动了，那么其他盒子也要设置浮动，以防发生问题

（二）、清除浮动
1、为什么要清除浮动
因为很多情况下，父盒子不方便给高度（正常的标准流：子盒子有多少内容就显示多少内容，自动撑开父亲最为合理），但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。

2、清除浮动本质
清除浮动主要是为了解决父级元素因为子级浮动引起内部高度为0的问题，父级清除浮动后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了。

3、清除浮动的方法（clear：）
clear:left/right/both
left:清除左侧的浮动
right:清除右侧的浮动
both:同时清除左右两侧的浮动
但是我们在实际工作中，几乎只用clear:both

（1）额外标签法
找到浮动元素，在最后一个浮动元素的末尾添加一个（class=“clear”）的空标签，然后在style样式里面写上clear的样式
缺点：添加了许多无意义的标签（不太提倡使用）

（2）为父级元素添加overflow属性(慎重使用）
overflow: hidden;
缺点：内容增多时，容易造成不会自动换行导致内容被隐藏掉（内容超出的部分被隐藏个），无法显示需要溢出的元素

（3）使用after伪元素清除浮动(最流行！！！)
网易
：after 是伪元素

:after方式是为空元素额外标签法的升级版，好处是不用单独加标签了

/声明清除浮动的样式/
.clearfix:after {
content: “”;
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
*zoom: 1; /这是IE6 IE7浏览器专门清除浮动的方式/
}

（4）使用双伪元素清除浮动(也比较流行！！！
小米，腾讯
.clearfix:before,
.clearfix:after {
content: “”;
display: table;
}
.clearfix:after {
clear: both; /这是IE6 IE7浏览器专门清除浮动的方式/

}

4、什么时候使用清除浮动？
（1）父级没有高度
（2）子盒子浮动了
（3）影响下面布局了，我们就应该清除浮动