CSS 浮动

CSS 浮动

浮动的设置

元素 {
  float: 属性值;
}

属性值	描述
none	元素不浮动(默认值)
left	元素向左浮动
right	元素向右浮动

浮动的特性

脱标

• 脱离标准普通流的控制(浮)移动到指定位置(动),俗称脱标
• 浮动的盒子不再保留原先的位置

行显示

• 如果多个盒子都设置了浮动,则它们会按照属性值一行内显示并且顶端对其排列
• 浮动的元素是相互贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐.

浮动元素具有行内块元素特性

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

• 如果块级盒子没有设置宽度,默认宽度和父级一样宽,但是添加浮动后,它的大小根据内容来决定.
• 浮动的盒子中间是没有缝隙的
• 行内元素同理

清除浮动

• 1.额外标签法,也成为隔墙法,是 W3C 推荐的做法
• 2.父级添加 overflow 属性
• 3.父级添加 after 伪元素
• 4.父级添加双伪元素

清除浮动-额外标签法

额外标签法会在浮动元素末尾添加一个空的标签.例如<div style="clear:both"></div>,或者其他标签(如<br />等).

• 优点: 通俗易懂,书写方便
• 缺点: 添加许多无意义的标签,结构化较差

注意:要求这个新的空标签必须是块级元素

清除浮动-overflow

可以给父级添加 overflow 属性,将其属性值设置为 hidden(常用),auto 或 scroll.

• 优点: 代码简洁
• 缺点: 无法显示溢出部分

注意:是给父元素添加代码

清除浮动-:after 伪元素法

:after 方式是额外标签法的升级版.也是给父元素添加

.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  /*IE6,IE7专有*/
  *zoom: 1;
}

用的时候需要给要清除浮动的元素的父元素添加 clearfix 类名

• 优点: 没有增加标签,结构更简单
• 缺点: 需要照顾低版本浏览器(主要指 IE6,IE7)

清除浮动-双伪元素清除浮动

也是给父元素添加

.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  /*IE6,IE7专有*/
  *zoom: 1;
}

用法同上

• 优点: 代码更简洁
• 缺点: 需要照顾低版本浏览器