浮动和清除浮动

今天给大家分享一下,什么是浮动和浮动。

1.背景介绍

在那个“蛮荒”的年代,Float的设计初衷不是为了什么高大上的布局,而仅仅是文字环绕效果。

浮动出现的意义仅仅是让文字来环绕图片而已。那为什么要知道这个呢?明白了float的设计初衷,

就可以明白float特有的行为表现了。

2.知识剖析

浮动模型也是一种可视化格式模型,浮动的框可以左右移动(根据float属性值而定),直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。浮动元素不在文档的普通流中,文档的普通流中的元素表现的就像浮动元素不存在一样。类似于absolute绝对定位。

3.文档流,一个简单的例子

将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。

从头到尾按照文档的顺序,该在什么位置就在什么位置。

这是不浮动的情况。

如果设置红色元素右浮动

如果设置红色方块左浮动,

Look,绿色方块已经被覆盖了。

都向左浮动,父元素高度塌陷,紫色的元素浮上来。

如果包含块儿太窄无法容纳水平排列的三个浮动元素,那么其它浮动块儿向下移动,直到有足够的扣减,如果浮动元素的高度不同,那么下下移动的时候可能被卡住。

所以,浮动会带来以下影响:

(1).内容被覆盖

(2).边框不能撑开

(3).高度塌陷

(4).如果浮动元素的高度不同,那么向下移动的时候可能被卡住等等。。。

4:解决办法:

而清除浮动有以下几个方法:

方法1:父级div定义 height

方法2:加标签

使用clear属性:在相同的父元素中,浮动的子元素之后添加一个空标签,设置样式为:"clear:both;"标签可以是div,也可以是p等块元素。

方法3:设置父元素

对父元素设置overflow的样式,即overflow:
    auto/hidden;overflow的包裹性使得设置了overflow:hidden属性的div有了高度,同时把图片封在了里面缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉,不能和position配合使用,无法显示需要溢出的元素;要是里面的元素要是想来个margin负值定位或是负的绝对定位,岂不是直接被裁掉了,所以此方法是有不小的局限性的。

方法4:最好的方法

它就是利用:after和:before来在元素内部插入两个元素块,从面达到清除浮动的效果。
其实现原理类似于clear:both方法,只是区别在于:clear在html插入一个div.clear标签,
after利用其伪类clear:after在元素内部增加一个类似于div.clear的效果(clearfix用在父元素上面)。

5代码实战

 

.clearfix() {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}

以上是添加伪类的代码

为父元素添加.clearfix即可。

look,完美。

6:扩展思考

还有什么更实用的办法来清除浮动

7:参考文献

参考一:清除浮动的几种方式

参考二:深入理解之float浮动

参考三:css 明白浮动的几种方式

8:更多讨论

1.直接在父元素添加clear:both行嘛?

2.如果不清除浮动会怎样,每种清除浮动的方法有什么优劣

3.还有什么方式触发bfc?


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页