浮动

浮动是什么?

元素设置了 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 中这些代码就不是必须的。