清除浮动专题

2018-06-24 00:54:44来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

1.三个已经混淆的概念

(1)不浮动float:none;

(2)清除周围的浮动元素

(3)清除子元素浮动对父元素的影响

 

2.什么是清除浮动

清除浮动不是把当前标签的浮动给清楚了,如果这样,还加浮动做什么。

其实清除浮动指的是清除当前元素旁边的浮动元素,但是当前元素又不能影响别人,打不赢就跑,所以自己就跑到下面去了。

 

3.为什么要清楚浮动

在布局的时候我们经常希望某些内容能够水平排布,水平排布后,由于内部内容不确定,高度不能简单的给一个定值。而如果不给高度,子元素又都浮动了,父盒子就会因为没有子盒子的支持而塌陷。

利用清除浮动的这个特性,我们可以给父元素中最后一个不浮动的盒子使用clear:both从而把父盒子的高度撑起来,并且能够根据内部内容的变化而改变高度。

 

4.清除浮动的方法

(1)额外标签法

原理:单独使用一个标签加上clear:both跑到浮动元素下面,从而消除子盒子浮动造成的父盒子塌陷。

典型网站:京东

优点:通俗易懂,容易掌握

缺点:添加很多无意义的空标签,不符合结构与表现分离的原则,不利于后期的维护。

 

(2)父元素设置overflow:hidden

原理:让父盒子形成BFC,BFC的特性之一就是可以承载浮动元素

优点:不存在结构和语义化问题,代码量极少。

缺点:内容增多时候不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。

BFC(block formatting content)快格式化上下文,是W3C规定的一种独立渲染区域。

其特性为:

  • BFC会阻止外边距折叠
  • BFC可以承载浮动元素
  • BFC可以阻止元素被浮动元素覆盖

总而言之,就是独立了。

哪些情况会触发BFC

  • float除了none以外的值
  • overflow除了visible以外的值(hidden,auto,scroll)
  • display(table-cell,table-caption,inline-block)
  • position(absolute,fixed)
  • 根元素

(3)单伪元素

.clearfix:after {

  content: "";

  height: 0;

  visibility: hidden;

  overflow: hidden;

  display: block;

  clear: both;

}

.clearfix {

  zoom: 1;/*IE67*/

}

典型网站:新浪、网易

 

(4)双伪元素

.clearfix:before, .clearfix:after {

  content: "";

  display: table;

}/*在内部元素的前面和后面添加元素*/

.clearfix:after {

  clear:both;

}/*只要after两侧有浮动元素,after就会跑到最下面,从而撑开带有该类名的父盒子*/

.clearfix {

  *zoom: 1;/*用于兼容IE/7/6*/

}

用display:table是因为display:block有空隙

加了一个before是为了防止外边合并

典型网站:小米、淘宝

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:如何自定义博客园样式

下一篇:【CSS3】使用JAVASCript触发过渡效果