浮动对页面带来的影响以及怎样消除浮动(详细)

网页布局是 CSS 的一个重点应用，传统的盒子模型依赖的主要是display，position以及float属性。在多次应用浮动之后，我决定深入了解浮动的原理，应用以及浮动带来的影响，如何清除浮动等，进行一番深入探索。自己汲取知识的同时也能方便在看的读者朋友，让我们开始吧！

首先，什么是浮动？

浮动，顾名思义，就是浮起来，脱离文档流，元素脱离正常元素的布局排版规则,其他处于文档流中的盒子在计算布局排版时,会自动无视已脱离文档流的元素来进行定位。
float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
除了float以外，position的absolute和fixed定位也可以让元素脱离文档流。

浮动的应用：

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。它会使元素向左或向右移动，其周围的元素也会重新排列。
现在浮动往往是用于图像，但它在布局时一样非常有用。

浮动最典型的应用:可以让多个块级元素一行内排列显示。
网页布局第一准则:多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。

我们的块级元素div是在页面中经常使用的，但是众所周知块级元素的特性就是独占一行，但是在网页排版中我们经常会用到多个div盒子在同一行的使用场景，那是因为使用了float属性。虽然将div设置为行内块元素也可以将盒子并排显示，但是它会让盒子中间有空隙，很难控制。

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式.
多说无益，上图~
这是简单的将三个div进行左浮动之后的样式
这是将两个块级元素进行左右浮动后的样式

加了浮动之后的元素,会具有很多特性,需要我们掌握的.
1．浮动元素会脱离标准流(脱标)
2．浮动的元素会一行内显示并且元素顶部对齐
3．浮动的元素会具有行内块元素的特性.

设置了浮动的元素最重要特性:

1．脱离标准普通流的控制(浮）移动到指定位置（动)，(俗称脱标)
2．浮动的盒子不再保留原先的位置

效果如下图所示：
浮动前，两个盒子都属于典型的标准流：

将要浮动的盒子设置做浮动后，它盖在了标准流盒子之上

⒉.如果多个盒子都设置了浮动，则它们会按照属性值一行内显示并且顶端对齐排列。

我们再将四个盒子按标准流排列：

将他们设置浮动后，四个盒子就会水平无间隙排列

假如将其中一个盒子设置不同的高度，效果仍是一样的：

注意∶浮动的元素是互相贴靠在一起的(不会有缝隙），如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐。

3.浮动元素会具有行内块元素特性。

任何元素都可以浮动。不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

如果行内元素有了浮动,则不需要转换块级\行内块元素就可以直接始高度和宽度

为了约束浮动元素位置,我们网页布局一般采取的策略是:
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置.符合网页布局第一准则.

浮动布局注意点

1.浮动和标准流的父盒子搭配。
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置

2.一个元素浮动了，理论上其余的兄弟元素也要浮动。
一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题。
浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流

清除浮动

我们前面浮动元素有一个标准流的父元素,他们有一个共同的特点都是有高度的.但是,所有的父盒子都必须有高度吗?
在很多页面中，例如产品展示，例如新闻排版，它们内容的高度是取决于所要放置的元素的多少，我们当然不可能给每一篇文章都设置一个高度
所以，理想中的状态是让子盒子撑开父亲.有多少孩子,父盒子就有多高.

为什么要清除浮动？

由于父级盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒了高度为0时，就会影响下面的标准流盒子。
图中两个子盒子本来应该在绿色的父盒子中，但是由于父盒子没有设置高度，导致后面的红色盒子上移，导致页面出现问题

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

清除浮动方法：
1.额外标签法也称为隔墙法
2.父级添加overflow属性
3.父级添加after伪元素
4.父级添加双伪元素

1.额外标签法：
额外标签法会在浮动元素未尾添加一个空的标签。例如<div style=" clear:both”>，或者其他标签(如
等）。
清除浮动前：

清除浮动后：
而这些只需要加上一行小小的代码：clear:both

优点︰通俗易懂，书写方便
缺点︰添加许多无意义的标签，结构化较差
注意:要求这个新的空标签必须是块级元素。

2.父级添加overflow属性
可以给父级添加overflow属性，将其属性值设置为hidden、auto或 scroll 。
效果和上图一致

3.父级添加after伪元素：
:after 方式是额外标签法的升级版。也是给父元素添加
由css给父盒子后添加一个新盒子

/*
父元素类名中添加clearfix
*/
   
 .clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
 }
.clearfix {
   /* IE6\7 专有 */
    *zoom: 1;
} 

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器

4.父级添加双伪元素
在父盒子前面也添加伪元素

.clearfix::before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
} 

本次的分享就到这里，我们下次再见^_^