css清除浮动各种方法：

ztyzz 发布于2019-08-28 17:59 / 1600人阅读

摘要：在和中给浮动块添加来让浮动块撑高并正常影响文档流。使用伪类来提供浮动块后的。其实他是来用处理边折叠的，跟清理浮动没有多大的关系。

1，在浮动元素后面增加
标签；

　　
标签有自带的清除浮动属性；

2，在浮动元素后面增加一个清除浮动层；

3,给浮动元素添加overflow:auto样式；

4，为最后浮动元素设置如下样式：

    /* 清理浮动 */
    .clearfix:after {
     visibility:hidden;
     display:block;
     font-size:0;
     content:" ";
     clear:both;
     height:0;
    }
    .clearfix {
     zoom:1;
    }

其原理是，在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:none 的不可见块状内容来，并给它设置 clear:both 来清理浮动。在 ie6 和 7 中给浮动块添加 haslayout 来让浮动块撑高并正常影响文档流。

5，另一种简洁的办法：

    .cf:before, .cf:after {
        content:"";
        display:table;
    }
    .cf:after {
        clear:both;
    }
    .cf {
        zoom:1;
    }

原理还是一样的。使用 :after 伪类来提供浮动块后的 clear:both。不同的是，隐藏这个空白使用的是 display: table。而不是设置 visibility:hidden;height:0;font-size:0; 这样的 hack。

值得注意的是这里中的 :before 伪类。其实他是来用处理 top-margin 边折叠的，跟清理浮动没有多大的关系。但因为浮动会创建 block formatting context，这样浮动元素上的另而一元素上如果刚好有 margin-bottom 而这个浮动元素刚好有margin-top 的话，应该让他们不折叠（虽然这种情况并不常见）。

云服务器 GPU云服务器清除浮动浮动-前端-css 的清除方法 html浮动向上浮动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110933.html

CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0
几种有效的清除浮动的方法

摘要：浮动是布局中最常用的属性，然而浮动是脱离文档流的，如果不清除浮动的话，会对周围的元素产生影响。也正是浮动脱离文档流这一特性，使浮动成为布局的难点之一浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘。浮动是CSS布局中最常用的属性，然而浮动是脱离文档流的，如果不清除浮动的话，会对周围的元素产生影响。也正是浮动脱离文档流这一特性，使浮动成为CSS布局的难点之一浮动框可以左右...

hss01248 2019-08-29 11:33 评论0 收藏0
几种有效的清除浮动的方法

摘要：浮动是布局中最常用的属性，然而浮动是脱离文档流的，如果不清除浮动的话，会对周围的元素产生影响。也正是浮动脱离文档流这一特性，使浮动成为布局的难点之一浮动框可以左右移动，直到它的外边缘碰到包含框或另一浮动框的边缘。浮动是CSS布局中最常用的属性，然而浮动是脱离文档流的，如果不清除浮动的话，会对周围的元素产生影响。也正是浮动脱离文档流这一特性，使浮动成为CSS布局的难点之一浮动框可以左右...

张金宝 2019-08-01 15:59 评论0 收藏0
css常见的各种布局上（两列布局）

摘要：目录一大结构上的导航栏和内容区域两栏布局博客园为例腾讯课堂个人中心页慕课网个人中心页个人中心页二版的结构三类似九宫格布局的两列结构四图文两列布局左图右文字非垂直居中，左图，右固定行数的文字，右侧文字和左边图片垂直居中。目录：一、大结构上的导航栏和内容区域两栏布局1、博客园为例2、腾讯课堂个人中心页3、慕课网个人中心页4、github个人中心页二、mini版的nav+cont结构三、类似九宫格...

番茄西红柿 2019-04-23 11:40 评论0 收藏0
浅谈 CSS 清除浮动的 6 种方法

摘要：如果要解决可以参考前面的办法。例如父元素处于绝对定位与上一个方法同理，由于绝对定位已脱离正常文档流，故出现相同情况，解决办法依旧可以使用以上办法结合，灵活多变。额外标签法使用:after 伪元素给父元素定高利用overflow:hidden;属性父元素浮动父元素处于绝对定位在开发网页的时候经常需要用到各种浮动，此时便需要及时的清除浮动，否则将会导致布局出现问题引出问...

WalkerXu 2019-08-28 18:20 评论0 收藏0