一、起因：

　　

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

　　

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

二、解决方案：

  • 父盒子设置固定高度
  • 内墙法
  • 伪元素清除法
  • 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 is_readable() 函数

    定义和用法 is_readable() 函数检查指定的文件是否可读. 如果文件可读,该函数返回 TRUE. 语法 is_readable(file) 参数 描述 file 必需.规定要检查的文件. 提 ...

  2. PHP setlocale() 函数

    实例 设置地区为 US English,然后再设置回系统默认: <?php高佣联盟 www.cgewang.comecho setlocale(LC_ALL,"US");ec ...

  3. bzoj 3790 神奇项链 回文串 manacher|PAM

    LINK:神奇项链 存在两个操作:1. 一个操作可以生成所有形式的回文串 2.一个操作可以将两个串给合并起来 如果前缀和后缀相同还可以将其并起来. 多组询问 每次询问合成一个串所需最少多少次2操作. ...

  4. Typora + PicGo-Core + Custom Command 实现上传图片到图床

    教程参考 Typora+PicGo-Core(command line)+Gitee实现图片上传到图床 主要借鉴 picgo 操作命令 Typora + PicGo + Gitee 实现图片自动上传到 ...

  5. 解读生成对抗网络（GAN） 之U-GAN-IT

    Unsupervised Generative Attentionnal Networks with Adapter Layer-In(U-GAN-IT) 从字面我们可以理解为无监督生成对抗网络和适配 ...

  6. 我用python远程探查女友每天的网页访问记录，她不愧是成年人！

    利用Python制作远程查看别人电脑的操作记录,与其它教程类似,都是通过邮件返回. 利用程序得到目标电脑浏览器当中的访问记录,生产一个文本并发送到你自己的邮箱,当然这个整个过程除了你把python程序 ...

  7. 14、Java文件操作stream、File、IO

    1.文件操作涉及到的基本概念 File File类 是文件操作的主要对象中文意义就是 文件 顾名思意 万物皆文件,在计算上看到的所有东西都是文件保存,不管是你的图片.视频.数据库数据等等都是按照基本的 ...

  8. 4、Java基本数据类型

    一.基本数据类型 1.基本数据类型 JAVA中一共有八种基本数据类型,他们分别是 byte.short.int.long.float.double.char.boolean 类型 型别 字节 取值范围 ...

  9. Java并发--基础知识

    一.为什么要用到并发 充分利用多核CPU的计算能力 方便进行业务拆分,提升应用性能 二.并发编程有哪些缺点 频繁的上下文切换 时间片是CPU分配给各个线程的时间,因为时间非常短,所以CPU不断通过切换 ...

  10. C#LeetCode刷题之#39-组合总和（Combination Sum）

    目录 问题 示例 分析 问题 该文章已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3663 访问. 给定一个无重复元素的数组 candi ...