一、起因：

　　

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

　　

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

二、解决方案：

  • 父盒子设置固定高度
  • 内墙法
  • 伪元素清除法
  • 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. PDO::__construct

    PDO::__construct — 创建一个表示数据库连接的 PDO 实例(PHP 5 >= 5.1.0, PECL pdo >= 0.1.0) 说明 语法 PDO::__constru ...

  2. luogu P3761 [TJOI2017]城市 树的直径 bfs

    LINK:城市 谢邀,学弟说的一道毒瘤题. 没有真正的省选题目毒瘤 或者说 写O(n)的做法确实毒瘤. 这里给一个花20min就写完的非常好写的暴力. 容易想到枚举哪条边删掉 删掉之后考虑在哪两个点上 ...

  3. QT学习笔记（day01）

    QT中的对象树 一定程度上简化了内存回收机制:当创建的对象 指定的父亲是由QObject或者Object派生的类时候,这个对象被加载到对象树上,当窗口关闭掉时候,树上的对象也都会被释放掉 信号和槽 通 ...

  4. 实战：docker搭建FastDFS文件系统并集成SpringBoot

    实战:docker搭建FastDFS文件系统并集成SpringBoot 前言 15年的时候,那时候云存储还远远没有现在使用的这么广泛,归根结底就是成本和安全问题,记得那时候我待的公司是做建站开发的,前 ...

  5. django--各个文件的含义

    当你创建项目或者应用后你是不是发现多了很多个文件,现在我们来看看各代表什么意思 与你项目名相同的文件夹:是项目的管理功能目录,这个目录的名称因用户所创建的项目名称的不同而不同 在该目录下还有四个文件: ...

  6. 【AHOI2009】中国象棋 题解（线性DP+数学）

    前言:这题主要是要会设状态,状态找对了问题迎刃而解. --------------------------- 题目描述 这次小可可想解决的难题和中国象棋有关,在一个N行M列的棋盘上,让你放若干个炮(可 ...

  7. Qt编译出现cc1plus.exe: out of memory allocating 65536 bytes问题

    今天编译Qt程序,出现这个问题: cc1plus.exe: out of memory allocating 65536 bytes 这个还没有遇到过,上网查了下.问题原因是资源文件过大. qt的资源 ...

  8. 解决 SQLException: Value '0000-00-00 00:00:00' can not be represented as java.sql.Timestamp的问题

    连接数据库时 设置:zeroDateTimeBehavior=convertToNull

  9. .NETCore微服务探寻(三) - 远程过程调用(RPC)

    前言 一直以来对于.NETCore微服务相关的技术栈都处于一个浅尝辄止的了解阶段,在现实工作中也对于微服务也一直没有使用的业务环境,所以一直也没有整合过一个完整的基于.NETCore技术栈的微服务项目 ...

  10. Visual-platform，基于Vue的可视化大屏开发GUI框架

    visual-platform 基于Vue的可视化大屏开发GUI框架 ------ CreatedBy 漆黑小T 构建用于开发可视化大屏项目的自适应布局的GUI框架. github仓库: https: ...