前言：

　　　　当不给父元素设置宽高时，父元素的宽高会被子元素的内容撑开。但当子元素设置浮动属性（float） 后，

　　　　 子元素会溢出到父元素外，父元素的宽高也不会被撑开，这称之为“高度塌陷”。可以理解为使用浮动后的副作用

　　　　

　　　　那什么是高度塌陷呢？比如下面截图，box1和box2的外层（这里外层指下图箭头所指的紫色部分）

　　　　

　　  　本来应该像下面截图一样，外层包裹住box1和box2，但因为设置浮动导致父元素高度塌陷，所以出现了上图的情况

　　　 

　　

　　3种浮动清除方法

　　以前我喜欢固定用一种方式来清除浮动，其实方法不止一种，下面简单总结了3种清除浮动的方法

　　①：使用 overflow: hidden; （子元素设置浮动后，直接给父元素添加 overflow: hidden;属性即可）

　   ②：使用 clear:both; （新增一个空div，然后给这个空div添加  clear:both;属性即可）

　   ③：使用 伪元素 ::after（给末尾添加一个看不见的块元素来清除浮动）

　　3种浮动清除方法优缺点

　　①：优点是语义化且代码量少；缺点是可能因为内容增加导致超出尺寸的内容被隐藏（不推荐）

　　②：优点是更加语义化；缺点是增加了一个空div，违背了结构样式行为应该分离的原则；（不推荐）

　　③：优点是不仅语义化而且遵守了结构样式行为应该分离的原则；没有什么缺点，现在是主流的方法，（推荐）

　　下面我按照上面 ①②③ 编号顺序给出对应 3种方法的代码示例demo

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .content {

                overflow: hidden;

                width: 1200px;

                border: 10px solid #8990D5;

            }

            .float-box {

                float: left;

            }

            .box1,

            .box2 {

                width: 400px;

                height: 400px;

                text-align: center;

            }

            .box1 {

                background-color: #FFB5BF;

            }

            .box2 {

                background-color: #94E8FF;

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="box1 float-box">box1</div>

            <div class="box2 float-box">box2</div>

        </div>

    </body>

</html>
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .content {

                overflow: hidden;

                width: 1200px;

                border: 10px solid #8990D5;

            }

            .float-box {

                float: left;

            }

            .box1,

            .box2 {

                width: 400px;

                height: 400px;

                text-align: center;

            }

            .box1 {

                background-color: #FFB5BF;

            }

            .box2 {

                background-color: #94E8FF;

            }

            .box3 {

                clear: both;

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="box1 float-box">box1</div>

            <div class="box2 float-box">box2</div>

            <div class="box3"></div>

        </div>

    </body>

</html>

　　

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .content {

                width: 1200px;

                border: 10px solid #8990D5;

            }

            .content::after {

                content: '';

                display: block;

                clear: both;

            }

            .float-box {

                float: left;

            }

            .box1,

            .box2 {

                width: 400px;

                height: 400px;

                text-align: center;

            }

            .box1 {

                background-color: #FFB5BF;

            }

            .box2 {

                background-color: #94E8FF;

            }

        </style>

    </head>

    <body>

        <div class="content">

            <div class="box1 float-box">box1</div>

            <div class="box2 float-box">box2</div>

        </div>

    </body>

</html>

css清除浮动的3种方式的更多相关文章

  1. css清除浮动的两种方式（clearfix和clear）

    最近总是在用浮动,这两种方式总是浮现在眼前,或者说去掉父级和同级浮动样式总在思考中.两种方式怎么写都在base.css中. 在做瑞祥之旅的过程中,还是吃了一个大亏,就是清除浮动,不管是同级还是父级,都 ...

  2. css清除浮动的几种方式，哪种最合适？

    细心的人可能发现了,写的导航条中存在一个问题,那就是使用了float之后,父级盒子的高度变为0了. 我们来写一个例子来看一下,创建一个父级div,并设置border属性,然后下边创建两个子元素span ...

  3. HTML/css清除浮动的几种方式

    浮动在HTML/CSS布局中十分常见,虽然浮动布局可以实现很多有用的排版效果,但是浮动的元素脱离了文档流,可能造成包含块高度塌陷.下方行框上移等行为.因此在使用浮动实现想要的效果后,通常还需要清除浮动 ...

  4. CSS清除浮动的几种方式

    浮动对页面的影响: 如果一个父盒子中有一个子盒子,并且父盒子没有设置高,子盒子在父盒子中进行了浮动,那么将来父盒子的高度为0.由于父盒子的高度为0, 下面的元素会自动补位,所以这个时候要进行浮动的清除 ...

  5. css 清除浮动的几种方式

    1.给浮动的元素的父级添加 overflow:hidden;属性 ul>不浮动 添加overflow:hidden; li>浮动 2.给浮动的元素的父级添加after伪类 ul:after ...

  6. 【css】清除浮动的几种方式

    [css]清除浮动的几种方式   因为浮动框不在普通的文档流中,所以它不占据空间.如下面的代码: .news { background-color:gray; border:1px solid bla ...

  7. css考核点整理（一）-浮动的理解和清除浮动的几种方式

    浮动的理解和清除浮动的几种方式 clear语法:clear : none | left | right | both 取值:none : 默认值.允许两边都可以有浮动对象left : 不允许左边有浮动 ...

  8. 前端老司机常用的方法CSS如何清除浮动？清除浮动的几种方式

    在前端开发过程中,我们经常会使用到浮动(float),这个我们即爱又恨的属性.爱,是因为通过浮动,我们能很方便地进行布局:恨,是因为浮动之后遗留下来太多的问题需要解决.下面本篇文章给大家介绍CSS清除 ...

  9. 活学活用，CSS清除浮动的4种方法

    清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...

随机推荐

  1. spring-cloud-zuul服务网关

    Zuul包含了对请求的路由和过滤两个最主要的功能: 其中路由功能负责将外部请求转发到具体的微服务实例上,是实现外部访问统一入口的基础,类似于保安的职能,而过滤器功能则负责对请求的处理过程进行干预,是实 ...

  2. MapReduce流量统计

    准备数据access.log 要用到的只有第二个手机号,倒数第三上行流量,倒数第二下行流量. 1363157985066 13726230503 00-FD-07-A4-72-B8:CMCC 120. ...

  3. python json按输入顺序输出内容

    通过使用collecions,进行排序.collections是一个python的内建模块. import collections dic = collections.OrderedDict() # ...

  4. Sentry部署

    前期准备 [root@Aaron ~]# uname -r 3.10.0-327.el7.x86_64 [root@Aaron ~]# uname -a Linux Aaron 3.10.0-327. ...

  5. ImCash:币安下架BSV之辩：规则、中立与去中心化

    一种看法是:一个引用价格数据和执行交易的加密货币交易所,其业务决策往往是在链外发生的,不受制于严格的.类似于准宪法的链上规则的约束,加密货币交易所可以拒绝任何人喜欢的价格和交易,而且这样做并不会损害底 ...

  6. 使用Python开发的POC多线程批量执行小框架

    因为代码量非常少,所以就叫“小框架”吧. 接口非常简陋,但是好处是适配POC脚本的时候很灵活,兼容性高,不需要任何研究成本. 简单来说,你按照自己的想法和习惯开发一个POC验证程序,它只要做到三点,即 ...

  7. Git 如何解决部署远程仓库出现 fatal: refusing to merge unrelated histories 问题

    想把本地仓库的文件搬到Github,先将远程仓库和本地仓库关联起来: 先到Github上复制远程仓库的SSH地址: 运行 git remote add origin 你复制的地址 理论上—如果在创建 ...

  8. jieba库

    Note of Jieba ( 词云图实例 ) Note of Jieba jieba库是python 一个重要的第三方中文分词函数库,但需要用户自行安装. 一.jieba 库简介 (1) jieba ...

  9. 支持不同Android设备，包括：不同尺寸屏幕、不同屏幕密度、不同系统设置

    Some of the important variations that you should consider include different languages, screen sizes, ...

  10. Nuxt.js 从入门到放弃

    Nuxt 是 Vue 上的 SSR,也就是服务端渲染应用框架,可在很大程度上解决当前 SPA 和 CSR 的首页加载慢,不利于 SEO 的问题.本场 Chat 就将详细介绍 Nuxt 的使用以及相关概 ...