网络日志

CSS 浮动

标签按照默认的方式排列,我们叫做标准流(也叫普通流、文档流)。

比如块状元素会独占一行,从上到下顺序排列,而行内元素会按照顺序从左到右排列,碰到父元素的边缘则自动换行。

标准流是最基本的布局方式。 但有很多的布局效果,仅仅用标准流是没有办法完成的,此时可以用浮动完成布局,因为 浮动可以改变元素标签默认的排列方式,最典型的应用:可以让多个块级元素一行内排列显示。

div { 
  float: none;         /*元素不浮动(默认值)*/
  float: left;         /*元素向左浮动*/
  float: right;        /*元素向右浮动*/
}

1、浮动特性

1.1 浮动元素会脱离标准流(脱标)

设置了浮动的元素,脱离了标准流的控制,不再保留原来的位置。

1.2 浮动的元素会一行内显示并且元素顶部对齐

如果多个盒子都设置了浮动,他们会按照属性值在一行内显示并且顶端对齐,即使各个盒子大小不一样。

如果父元素一行内装不下多个盒子,多出的盒子会另起一行对齐。

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

任何元素都可以设置浮动,不管原来是块级元素、行内元素还是行内块元素。设置浮动后,元素可以获得行内块元素的特性。

  • 如果 行内元素设置为浮动,不需要模式转换就可以给元素设置宽度和高度
  • 如果 块级盒子 没有设置宽度,默认宽度和父级是一样的,在设置浮动后,其大小根据内容来决定
  • 浮动的元素和行内块元素的区别:浮动的盒子是互相挨在一起的,没有缝隙。

2、浮动布局注意点

2.1 浮动和标准流的父盒子搭配

在布局过程中,我们先用标准流的父元素排列上下位置,之后内部子元素采用浮动排列左右位置。

子元素可以先设置尺寸,然后再排列位置。

2.2 一个元素浮动了,理论上其余的兄弟元素也要浮动

一个盒子设置为浮动后,会影响浮动盒子后面的标准流(因为浮动元素会脱标)。如果一个盒子中有多个盒子,如果其中的一个盒子浮动,那么其他兄弟元素也应该浮动。

3、清除浮动

由于父级盒子很多情况下,不方便给高度(比如一些购物网站的商品页,商品数量不是一定的,父盒子的高度也是不一定的),但子盒子浮动又不占有位置,最后的结果就是父级盒子高度为 0,会影响下面的标准盒子。

这个时候我们就需要 清除浮动。清除浮动不是让元素不浮动,清楚浮动的 实质是清除浮动元素造成的影响。

如果父盒子本身有高度,就不需要清除浮动。清除浮动后,父级会根据浮动的子盒子自动检测高度。 父级有了高度,就不会影响后面的标准流了。

div {
  clear: left;        /*不允许左侧有浮动元素(清除左浮元素影响)*/
  clear: right;       /*不允许右侧有浮动元素(清除右浮元素影响)*/
  clear: both;        /*同时清除左右两侧浮动的影响(实际工作中,几乎只用这个)*/
}

清除浮动的策略是闭合浮动。只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子。

3.1 清除浮动 —— 额外标签法

额外标签法也称为隔墙法。

额外标签法会在浮动元素末尾添加一个空的标签【要求这个标签必须是块级元素】。例如 <div style="clear: both"></div>, 或者 <br/>。

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

3.2 清除浮动 —— 父级添加 overflow

可以给父级添加 overflow 属性,将其设置为 hidden、auto 或 scroll。

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

3.3 清除浮动 —— :after 伪元素法

额外标签法的升级版,也是给父元素添加

.clearfix:after {
  content: '';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
/* IE6、7 专有 */
.clearfix {
  *zoom: 1;
}

优点:没有增加标签,结构简单缺点:照顾低版本浏览器。

3.4 清除浮动 —— 双伪元素清除浮动

同样给父元素增加

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

优点:没有增加标签,结构简单缺点:照顾低版本浏览器。