一、起因：

　　

　　子盒子设置浮动之后效果：

　　

　　由此可见，蓝色的盒子设置浮动之后，因为脱离了标准文档流，它撑不起父盒子的高度，导致父盒子高度塌陷。如果网页中出现了这种问题，会导致我们整个网页的布局紊乱

二、解决方案：

  • 父盒子设置固定高度
  • 内墙法
  • 伪元素清除法
  • overflow:hidden

（1）父盒子设置固定高度

　　

　　虽然，给父盒子设置了固定高度能暂时解决我们的问题，但是它的使用不灵活，如果未来子盒子的高度需求发生了改变(网页的多处地方)，那么我们得手动需要更改父盒子的高度。后期不易维护。

应用：网页中盒子固定高度区域，比如固定的导航栏。

缺点：使用不灵活，后期不易维护

（2）内墙法

　　在浮动元素的后面加一个空的块级元素(通常是div),并且该元素设置 clear:both；属性。clear属性，字面意思就是清除，那么both,就是清除浮动元素对我左右两边的影响。

　　代码如下：

    <!DOCTYPE html>

    <html>

    <head>

        <meta charset="utf-8">

        <title>浮动元素的破坏性</title>

        <style type="text/css">

            .father{

                border: 1px solid red;

            }

            .child{

                width: 200px;

                height: 200px;

                float: left;

                background-color: green;

            }

            .clearfix{

                clear: both;

            }

        </style>

    </head>

    <body>

        <div class="father">

            <div class="child">儿子</div>

            <div class="clearfix"></div>

        </div>

    </body>

    </html>

应用：网页中应用不多，只是为了引导下一个清除浮动的方式。

缺点：结构冗余

（3）伪元素清除法

　　内墙法是在浮动元素的后面加一个空的块级元素(通常是div),并且该元素设置clear:both；属性。

　　那么正好在css3的属性用法中整好有个选择器也完全符合这个用法，伪元素选择器。伪元素选择器很简单。就像伪类一样，让伪元素添加了选择器，但不是描述特殊的状态，允许为元素的某些部分设置样式。

（4）overflow:hidden

　　

CSS布局中浮动问题的四种解决方案的更多相关文章

  1. 关于for循环中使用setTimeout的四种解决方案

    我们先来简单了解一下setTimeout延时器的运行机制.setTimeout会先将回调函数放到等待队列中,等待区域内其他主程序执行完毕后,按时间顺序先进先出执行回调函数.本质上是作用域的问题. 因此 ...

  2. DIV CSS布局中绝对定位和浮动用法

    转自:http://developer.51cto.com/art/201009/223337_1.htm 你对DIV CSS布局中绝对定位和浮动的概念及使用是否熟悉,这里和大家分享一下,CSS中,实 ...

  3. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  4. DIV+CSS布局中主要CSS属性介绍

    Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float属性可以实现一行显示多个div的功能 ...

  5. CSS布局中的水平垂直居中

    CSS布局中的水平垂直居中 各位好,先说两句题外话.今天是我开通博客园的博客第一天,虽然我申请博客园的账号已经有一年半了,但是由于各种原因迟迟没有开通自己的博客.今天非常有幸开通博客,在此也写一篇关于 ...

  6. 认识和理解css布局中的BFC

    认识和理解css布局中的BFC BFC的定义 是 W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用. Block Formatting Con ...

  7. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  8. mysql中模糊查询的四种用法介绍

    下面介绍mysql中模糊查询的四种用法: 1,%:表示任意0个或多个字符.可匹配任意类型和长度的字符,有些情况下若是中文,请使用两个百分号(%%)表示. 比如 SELECT * FROM [user] ...

  9. JAVA中集合输出的四种方式

    在JAVA中Collection输出有四种方式,分别如下: 一) Iterator输出. 该方式适用于Collection的所有子类. public class Hello { public stat ...

随机推荐

  1. PHP imagecolorclosest - 取得与指定的颜色最接近的颜色的索引值

    imagecolorclosest — 取得与指定的颜色最接近的颜色的索引值.高佣联盟 www.cgewang.com 语法 int imagecolorclosest ( resource $ima ...

  2. 通过MyBatis操作数据库

    MyBatis是一款优秀的持久层框架,同样也是做OR Mapping的.与JPA不同,MyBatis里面需要我们自己来定制sql. MyBatis和JPA的选择 其实如果业务比较操作比较简单使用JPA ...

  3. PyTorch 学习

    PyTorch torch.autograd模块 深度学习的算法本质上是通过反向传播求导数, PyTorch的autograd模块实现了此功能, 在Tensor上的所有操作, autograd都会为它 ...

  4. Django REST framework 单元测试

    Django REST framework 单元测试 只是简单记录一下测试代码怎么写 环境 Win10 Python3.7 Django2.2 项目 参照官网 快速开始 写了一个 demo 测试 参照 ...

  5. 怎么在微信公众号上传PPT？

    我们都知道创建一个微信公众号,在公众号中发布一些文章是非常简单的,但公众号添加附件下载的功能却被限制,如今可以使用小程序“微附件”进行在公众号中添加附件. 以下是公众号添加附件使用“微附件”小程序的教 ...

  6. akka-typed(9) - 业务分片、整合，谈谈lagom, 需要吗？

    在讨论lagom之前,先从遇到的需求开始介绍:现代企业的it系统变得越来越多元化.复杂化了.线上.线下各种系统必须用某种方式集成在一起.从各种it系统的基本共性分析:最明显的特征应该是后台数据库的角色 ...

  7. 2020-05-27：SpringCloud用了那些组件？分布式追踪链怎么做的？熔断器工作原理？

    福哥答案2020-05-27: SpringCloud分布式开发五大组件详解服务发现——Netflix Eureka客服端负载均衡——Netflix Ribbon断路器——Netflix Hystri ...

  8. Java程序员面试必备：Volatile全方位解析

    前言 volatile是Java程序员必备的基础,也是面试官非常喜欢问的一个话题,本文跟大家一起开启vlatile学习之旅,如果有不正确的地方,也麻烦大家指出哈,一起相互学习~ 1.volatile的 ...

  9. 面试官：怎么做JDK8的垃圾收集器的调优？

    面试官:怎么做JDK8的垃圾收集器的调优? 看着面试官真诚的眼神,心中暗想看起来年纪轻轻却提出如此直击灵魂的问题.擦了擦额头上汗,我稍微调整了一下紧张的情绪,对面试官说: 在JDK8中有Serial收 ...

  10. 针对VM从挂机-启动后，docker相关服务的无法使用问题！

    使用软件 :VMware  WorkStation 使用系统:linux  centOS 7 windows远程调用软件:xshell 挂机-启动状态后 先使用  service network re ...