一、起因：

　　

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

　　

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

二、解决方案：

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

    ------------恢复内容开始------------ 实例 以一个数值数组和一个关联数组的形式输出本地时间: <?phpprint_r(localtime());echo "& ...

  2. Android中的LruCache的原理和使用

    Android中的LruCache的原理和使用 LruCache,虽然很多文章都把LRU翻译成"最近最少使用"缓存策略,但Android中的LruCache真的如此吗? 答案是No ...

  3. angular2+ 组件间通信

    angular2+ 不同于react的redux,vue的vuex,angular2+其实可实现数据状态管理的方法很多,以下方案一般也足够支撑普通业务: 父子组件通信 1.1 父组件向子组件传递信息( ...

  4. MySQL一主多从配置和读写分离配置

    一.一主多从配置 此次操作实现的是一主两从的方式.主服务器slave2(2.100),从服务器slave2-1(2.107),slave2-2(2.108);第一:准备主数据库    1. 在不同的机 ...

  5. JDBC(3)-数据库事务

    一.环境搭建(复习) 首先建立lib目录然后要把对应的jar包导进来 然后就是jdbc.properties文件 user=root password=123456 url=jdbc:mysql:// ...

  6. IntelliJ IDEA 修改内存大小，使得idea运行更流畅。(转发)

    原文地址:https://blog.csdn.net/qq_27093465/article/details/81947933 idea有个配置文件,可以设置内存大小的,就跟咱的jvm的内存里面的堆大 ...

  7. vue中模块局部刷新

    父组件: 一. 父组件中引入子组件           data中定义变量 二. 定义provide函数 三.写reload方法 需要刷新的那个子组件: 一.引入                   ...

  8. 002_centos7关闭防火墙

    防火墙是比较烦人的,在自己做实验,或者实际应用中,如果配置不好的话,会出现各种匪夷所思的问题,那么如何关闭呢 在centos7里,防火墙改为了firewalld进程 首先用命令firewall-cmd ...

  9. ECS7天实践进阶训练营Day5：使用ECS自建云端下载服务器

    一.概述 CCAA是服务器离线下载解决方案包,其组件中包含了Aria2提供了离线下载功能,能支持HTTP/HTTPS/FTP/BT/磁力链下载等常用离线下载模式及断点续传等功能.ccaa_web支撑于 ...

  10. C#设计模式之14-命令模式

    命令模式(Command Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/413 访问. 命令模式属于行 ...