浮动

浮动是什么?

元素设置了float:left或者float:right,相应的就会向其父元素的左侧或右测进行浮动

浮动元素的特点

• 浮动的元素完全脱离标准流(脱标),不再占用标准流中的位置
• 浮动元素的宽高是由内容撑开
• 设置浮动以后会向父元素的左侧或右侧移动
• 浮动元素默认不会从父元素中移出
• 浮动元素向左或向右浮动时,不会超过它前边的其他浮动元素
• 如果浮动元素的上边是一个没有浮动的块级元素,则浮动元素无法上移
• 浮动元素一般只能覆盖标准流中的块级元素，其他如文字、图片和行内块，会把这些元素挤到一边去

为什么要清除浮动?

由浮动元素的特点可知,浮动元素脱标,不再占用标准流中的位置,所以,如果父元素不设置高度,浮动元素不能撑起其父元素的高度,其父元素的兄弟块级元素(没有浮动)位置会自动上移,浮动元素对标准流中的其他元素的布局影响较大,导致页面布局混乱,所以必须要清除浮动带来的影响.

清除浮动的几种方式

• 父级元素定义height

  

• 父级元素开启BFC(Block Formatting Context)块级格式化上下文

  • 设置overflow:hidden（只要不是visible就可以）

  • 父级元素设置display:table

  • 其他任何可以开启父元素BFC的方法都可以

    

• 额外标签法:结尾处加空div标签或其他块级标签clear:both

  

• 单伪元素清除法

.clearfix::after {  
     content:'';  
     display:block;  
     clear:both;  
    }  
    ​  
    .clearfix {  
     \*zoom:1;  /\*IE/7/6\*/  
    }

• 双伪元素清除法

.clearfix::before,  
    .clearfix::after{  
     content: '';  
     display: table;  
    }  
    ​  
    .clearfix::after{  
     clear:both;  
    }   
    ​  
    .clearfix{   
     \*zoom:1;  /\*IE/7/6\*/  
    }

注意点:

*   单伪类或双伪类是清除浮动比较好的方法,推荐使用
    
*   单伪类和双伪类清除浮动的原理是一样的,只是单伪类只能用于清除浮动,而双伪类既能清除浮动,又能解决垂直方向父子元素的外边距塌陷问题
    

单伪元素清除浮动的原理

清除浮动,即清除浮动元素对其周围元素(浮动元素的兄弟元素)的影响,即使浮动元素脱标了,他的兄弟元素在标准流中位置不会受到影响

伪元素清除浮动原理和额外标签法一样，

额外标签法的缺点：

• 额外标签是在html结构中创建额外的空div标签，这个标签除了用于清除浮动，没有任何其他作用，在html结构中显得冗余
• 浮动元素下面的兄弟元素位置上移，在浏览器中属于样式部分，用html结构处理样式的问题，没有做到html结构和css样式完全分离

代码解析：

/\*创建一个清除浮动的类，结构中哪个元素浮动了，给他的父元素添加这个类即可\*/  
/\*在父元素的内容区后面创建一个元素，这个元素相当于额外标签法中的那个冗余的标签\*/  
.clearfix::after {  
 /\*使用伪元素创建元素，必须加content：'';内容为空也可以\*/  
 content:'';  
 /\*使用伪元素创建的元素默认是行内元素，需要转化块级元素\*/  
 display:block;  
 /\*清除浮动的关键代码\*/  
 clear:both;  
}  
​  
/\*兼容IE6/IE7\*/  
.clearfix {  
 \*zoom:1;  /\*IE/7/6\*/  
}

伪元素清除法解决了额外标签法的缺点，通过伪元素创建的元素不会在html结构中出现，不会使html结构显得冗余，完全使用css手段解决了浮动带来的影响，实现了html结构和css样式的完全分离

单伪元素清除法和双伪元素清除法的区别

单伪元素只能清除浮动，双伪元素既能清除浮动，又能解决外边距塌陷问题

外边距塌陷是什么？

垂直方向相邻的块级元素,兄弟元素之间会出现外边距合并问题，父子元素之间则会出现外边距塌陷问题，即给子元素设置margin-top，父元素会随子元素会同时向下移动

解决方法:

• 让父子元素上外边距不相邻

  • 给父元素设置上外框
  • 给父元素设置上内边距
  • 在html结构中父子元素之间加一个table标签

• 开启父元素的BFC

  • 父元素设置overflow:hidden;
  • 父元素设置display：table；
• 把父元素或子元素转换为行内块

而双伪元素解决外边距塌陷问题，则是利用了让父子元素外边距不相邻的原理

代码解析:

/\*在父元素的内容区前面创建一个元素，这个元素相当于把父元素和子元素的上外边距隔开\*/  
.clearfix::before,  
/\*在父元素的内容区后面创建一个元素\*/  
.clearfix::after{  
 /\*使用伪元素，必须写content\*/  
 content: '';  
 /\*，把元素转化为table，使创建的元素具有表格的属性\*/  
 display: table;  
}  
/\*清除浮动所特有的代码，所以单独写\*/  
.clearfix::after{  
 clear:both;  
}   
/\*兼容IE6/IE7\*/  
.clearfix{   
 \*zoom:1;  /\*IE/7/6\*/  
}

display：table和display：block的区别

有时我们会看到这样的代码

.clearfix::before,  
.clearfix::after {  
 content: '.';  
 display: block;  
 height: 0;  
 line-height: 0;  
 font-size: 0;  
 overflow: hidden;  
}  
​  
.clearfix::after {  
 clear: both;  
}  
​  
.clearfix {  
 \*zoom: 1;  /\*IE/7/6\*/  
 }

代码的不同是display的属性值不同导致的，而这些区别就是为了解决外边距塌陷问题，清除浮动使用display：block或display;table都可以。

当display是table时，则会创建一个独立的渲染区域（开启BFC），不管content属性中内容是否为空，这个区域会隔开父元素和子元素的上外边距。（注意：父元素设置display：table，则是开启父元素的BFC;而伪元素方法是在父元素内容区前面创建一个元素把父元素和子元素的上外边距隔离开）

当display是block时，如果content属性中内容为空，则不能隔开父元素和子元素的上外边距，因为display：block不能开启BFC，所以content属性中内容必须要有值才可以隔开父元素和子元素的上外边距，而这个值并不是我们需要，并且也会影响到页面的布局，所以会有height:0;line-height:0;font-size：0；overflow：hidden；把文字隐藏，也不会对页面布局有影响，而在display：table中这些代码就不是必须的。