浮动和清除浮动

原创 2018年04月17日 16:39:46

今天给大家分享一下,修真院官网CSS-7任务中可能会使用到的知识点:

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?


css清除浮动float的七种常用方法总结和兼容性处理

7、万能清除法 **after伪类** 清浮动(现在**主流**方法,**推荐使用**) ``` 选择符:after{ content:"."; clear:both; ...
  • promiseCao
  • promiseCao
  • 2016-10-09 23:04:14
  • 20357

Bootstrap清除浮动问题

理想是美好的,但现实是残酷的。我们来举一个美好的例子。在小型屏幕上,希望实现如图2-10所示的效果。   但是在超小型屏幕下,则希望每行只显示两个div元素,即如图2-11所示的效果。 ...
  • lduzhenlin
  • lduzhenlin
  • 2016-05-27 12:51:23
  • 8632

伪类:after清除浮动的原理和方法

浮动元素容器的clearing问题 1. 问题的由来 有这样一种情形:在一个容器(container)中,有两个浮动的子元素。                 在浏览器中一运行,就会出现意想不...
  • NNNaix
  • NNNaix
  • 2017-02-03 22:04:26
  • 15843

web前端面试常见问题三------浮动原理和清除浮动

web前端面试常见问题三                                                      ------浮动原理和清除浮动             面试的时...
  • u012763269
  • u012763269
  • 2015-06-23 11:23:52
  • 3708

用原生js清除浮动的方法

使用浮动后,父元素会发生高度塌陷的问题,体现在父元素没有高度,边框不能撑开,margin设置值不能正确显示。 解决的方法: 1:给父元素添加 overflow:auto;zoom:0.08; 2...
  • snshow
  • snshow
  • 2016-12-16 21:29:22
  • 974

BFC与清除浮动

欢迎访文我的博客YangChen’s Blog快投简历了,到时候肯定避免不了要笔试或者面试一些前端题目,所以呢有空把一些基础知识总结下这次说到的是BFC和清除浮动BFC首先说一下什么是BFC,引用下别...
  • yc123h
  • yc123h
  • 2016-05-07 13:05:30
  • 872

浏览器兼容性经典问题(四) 更好的清除浮动

问题描述:         在你使用css的过程中,多多少少会遇到清除浮动这个问题。         在一个div容器里面,容器中含有一个浮动的div,在浮动元素后面还有一些块元素。如果浮动的高度...
  • speed_feng
  • speed_feng
  • 2012-12-03 08:51:55
  • 2113

清除浮动的三种方法(::after/.clear/overflow)

清除浮动的三种方法 ::after clear:both; overflow
  • screaming_color
  • screaming_color
  • 2016-03-23 22:05:51
  • 2208

理解为何需要清除浮动及清除浮动的方法

本文主要讲为什么要清除浮动及解释bfc,及其包含浮动的原理。
  • qq_31915745
  • qq_31915745
  • 2017-05-19 12:10:52
  • 3331

为什么要清除浮动,什么时候要清除浮动,如何清除浮动

众所周知,CSS中的定位机制分为,文档流,浮动和绝对定位。(今天不谈绝对定位),如果对元素没有进行任何定位处理的话,元素应该处于文档流中,当我们对元素进行了浮动(float)时,我们的元素就会脱离文档...
  • WEB_YH
  • WEB_YH
  • 2016-11-16 14:03:46
  • 2344
收藏助手
不良信息举报
您举报文章:浮动和清除浮动
举报原因:
原因补充:

(最多只允许输入30个字)