浮动(float)与清除浮动(clear)

2018-06-24 02:08:08来源:未知 阅读 ()

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

      上一篇中我们了解了块级元素与内联元素,今天将自己查阅的资料整理写出来,与大家一起理解什么是浮动,以及怎样清除浮动,本文以div元素为例。

      浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。所以浮动也有left、right、none三种。浮动元素是脱离文档流的,漂浮在文档流之上,和文档流不是一个层次。

HTML 文件就像是一个方形的水槽,它在浏览器中加载的过程就好比是向水槽中放水,而这些水就代表的是页面中的各个元素,他们都是有顺序的进入水槽(文档流的顺序 和我们写字一样,从上到下从左到右)。当出现了一个具有浮动属性(float)的元素时,就好像是水流中多了一块泡沫,它会浮在水面上(也就是说明元素脱 离了文档流)。在水流停止后(页面加载完毕),这个元素会停靠在水槽的边缘或者停靠在别的泡沫边缘(浮动元素会处于包含框的边缘或者另一个浮动元素的边 缘)。(引用自老贝v5)

 

 

      看上图,4个div都各占一行(即使div的宽度不宽,后面足以容纳下一个div,但还是各占一行),形成文档流,现在我们给div2加上float:left(左浮动),变成下图所示:我们发现div3的一部分被div2遮住了,div3和div4都上移了一部分,紧跟在div1后面,组成了新的文档流,而div2相当于漂浮在文档流之上,又因为是左浮动,所以靠左排列。

 

 如果给div2加上右浮动,更能清楚的看到div3与div4自动上移,占据了div2的位置。如下图:

 

      如果把div2,3,4都左浮动之后会是怎样呢?我们做了下图的试验,可以看到,div3和div4都紧跟在div2之后,如果一行排列不了,那么那个元素会掉到下一行(如下图2)。由此可以得出结论:

      假如某个div元素A是浮动的,如果A元素上一个元素也是浮动的,那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素,那么A元素会被挤到下一行);如果A元素上一个元素是标准流中的元素,那么A的相对垂直位置不会改变,也就是说A的顶部总是和上一个元素的底部对齐。

div的顺序是HTML代码中div的顺序决定的。

靠近页面边缘的一端是前,远离页面边缘的一端是后。(摘自经验分享:CSS浮动(float,clear)通俗讲解)

 

      到这里,大家应该基本了解了浮动的原理,那么接下来我们看看浮动会导致什么?

      浮动会导致父元素高度坍塌。因为浮动使元素脱离了文档流,并不占据文档流的位置,父元素也就不能被撑开,所以高度塌陷了。这给用浮动页面布局带来了麻烦,解决方法就是清除浮动。

 

清除浮动?

      清除浮动的关键字是clear,官方定义如下:

      语法:

      clear : none | left | right | both

      取值:

      none : 默认值。允许两边都可以有浮动对象

      left : 不允许左边有浮动对象

      right : 不允许右边有浮动对象

      both : 不允许有浮动对象

      如图div1与div2都左浮动,div2紧跟在div1后面,如果想让div2在div1下面,就要清除浮动;因为清除浮动只作用与你想让移动的元素,所以对div1设置css样式clear:right是没有任何作用的,因为想让div2掉下去,就得对div2设置clear:left;就会如图让div2移到下方。

 

      再举一个例子:div1与div2左浮动,导致外层container高度塌陷,给页面增加一个页脚(footer),按照上面的说法,要想让页脚回到下面,只需给footer{clear:left;},但是container的边框仍然是一条线,怎么办呢?

 

1.增加一个清除浮动的子元素

 

2.我们可以给父元素添加以下属性来触发BFC:
      ? float 为 left | right
      ? overflow 为 hidden | auto | scorll
      ? display 为 table-cell | table-caption | inline-block | flex | inline-flex
      ? position 为 absolute | fixed

      所以我们可以给父元素设置 overflow:hidden/auto(如果你还要兼顾IE6的话,加上*zoom:1;来触发hasLayout)效果和上图相同,也可以给父元素也设置浮动,但页脚会上移,还得给页脚设置clear:left;不推荐用。也可以给父元素设置display:table。效果相同,页脚也不需要设clear:left;但页面布局可能被改变,不推荐用。

3.用:after伪元素,思路是用:after元素在div后面插入一个隐藏文本”.”,隐藏文本用clear来实现闭合浮动。推荐用。

 

      .clearfix:before,.clearfix:after {
             display: table;
             content: " ";
       }
      .clearfix:after {
             clear: both;
       }
      .clearfix{
             *zoom: 1;
       } // 全浏览器通用的clearfix方案,引入了zoom以支持IE6/7, 同时加入:before以解决现代浏览器上边距折叠的问题。

以上就是整理的浮动与清除浮动的基本知识啦~

标签:

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

上一篇:深入学习css之background属性

下一篇:网页结构+盒模型