Float是我们在页面布局中常用的，也是非常重要的一个属性，可以让页面布局变得更加灵活。

但是在继续学习之后，尤其是掌握了宽高自适应之后，我们常常会发现一个奇怪的现象：如果父元素没有设置高度，而子元素都浮动了的话，父元素就“瘪”了。

就像下面这样

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            .box1{width: 400px;border: 1px solid #000;}

            .boxl{width: 200px;height: 200px;float: left;background: red;}

            .boxr{width: 100px;height: 100px;float: right;background: orangered;}

        </style>

    </head>

    <body>

        <div class="box1">纸

            <div class="boxl">大火</div>

            <div class="boxr">小火</div>

        </div>

    </body>

</html>

很显然，纸是包不住火的。

但是这显然不是我们想要的那样。我们希望能使用浮动调整内部的布局，又希望父元素不会高度塌陷，要怎样做呢？我总结了四种方法。

第一种方法：添加高度

很简单，既然父元素高度自适应会塌陷，那就不自适应了，直接加上固定高度，那肯定是不会塌了。但是这种方法在页面设计中显然是不太合适的。因为比较简单，代码就不再附上了。

第二种方法：overflow:hidden;或者overflow:auto;

这两种方法是利用对溢出元素的处理，使父元素紧贴子元素的边界，这样一来，高度塌陷也就解决了，只不过，因为是元素溢出属性，所以真有元素溢出的话，也会按照给的属性值执行。

一种情况无法显示所有的内容，一种则会出现滚动条，都是各有缺陷。

还有一种方法，是在浮动的子元素下面添加一个空元素，添加属性clear:both;

顾名思义，这个属性的作用就是清除浮动，不过不是清除其他元素的浮动，而是清除左右浮动对自己的影响。

<html>

    <head>

        <meta charset="utf-8">

        <title></title>

        <style type="text/css">

            .box1{width: 400px;border: 1px solid #000;}

            .boxl{width: 200px;height: 200px;float: left;background: red;}

            .boxr{width: 100px;height: 100px;float: right;background: orangered;}

            .clear{clear: both;border: 1px solid blue;}

        </style>

    </head>

    <body>

        <div class="box1">纸

            <div class="boxl">大火</div>

            <div class="boxr">小火</div>

            <div class="clear">The World</div>

        </div>

    </body>

</html>

看，添加这样一个子元素后，父元素的高度也填充起来了。

只要把这个子元素设置成空的，既不会影响整体样式，父元素也不会塌陷了。

只是这样一来，页面中就要添加很多空标签，无意义的代码很多，也很影响阅读。于是在这之上，可以使用伪对象来简化代码。

在原代码的基础上添加.box1::after{content: "";height: 0;clear: both;display: block;}

再来看一下效果

这下，纸真的可以包住火了。

最后一种方法在我的学习中被称为万能清除法，事实上，现在的页面开发中也常用这种方法来解决高度塌陷问题。

总结一下，解决高度塌陷的方法有四种：

1 添加固定高度 简单粗暴 适合固定内容固定高度的页面布局

2 overflow溢出隐藏 缺点是溢出内容会被隐藏或出现滚动条

3 浮动元素底部添加空标签属性clear:both;  代码冗余 可读性差

4 利用伪对象简化代码 可复用

float浮动造成高度塌陷的解决办法的更多相关文章

  1. float浮动之后高度自适应失效解决方案

    float浮动之后高度自适应失效解决方案 >>>>>>>>>>>>>>>>>>>> ...

  2. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  3. [CSS]CSS浮动塌陷及解决办法

    一. CSS浮动 先看一个例子 <html !DOCTYPE> <head> <title>HTML2</title> <style> .d ...

  4. 如何解决浮动元素高度塌陷---CSS

    解决高度塌陷问题的方法: 方法一. //给父元素添加声明 overflow:hidden; 缺点:回隐藏溢出的元素: 方法二. 在浮动的元素下添加空div标签,并给该元素添加声明: clear:bot ...

  5. css之高度塌陷及其解决方法

    浅谈 清除浮动 的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素 ...

  6. css关于浮动的高度塌陷

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. 外层div高度不随内层div高度改变的解决办法

    当b1和b2都是float=left时候,a1层的高度不会被b1和b2的高度撑开. <div id=“div1″> <div id=”div2″ style="float: ...

  8. jquery获取高度错误(可以获取到宽度，但获取不到高度)，及解决办法

    <div class="foo"> <div style="display: none;"> 3333333 </div> ...

  9. ul li列表元素浮动导致border没有底边解决办法

    如图,当ul li,li元素浮动,并且ul元素也overflow:hidden清除浮动的时候,给li元素加了border,但是不显示底边,这时候要看是不是没有给li元素加高,因为加了border之后默 ...

随机推荐

  1. 搭建Samba服务器、多部门共享，互不干扰，超实用

    案例二 实现不同的用户访问同一个共享目录具有不同的权限,便于管理和维护.基本上能满足一些企业用户的需求. 一. 需求 1. 某公司有3个大部门,分别为:人事行政部(HR).财务部(FM).技术支持部( ...

  2. 在Windows系统中安装Redis和php_redis扩展

    安装Redis (1)下载redis压缩包,git下载地址https://github.com/MSOpenTech/redis/releases 解压文件夹,在文件夹中运行cmd命令: 输入:   ...

  3. 注销Apache

    到D:\phpTools\Apache24\bin下运行cmd 输入httpd.exe -k uninstall -n apache24 回车后提示注销完成 接着把Apache的文件删了即可

  4. windows下修改tomcat的startup.bat脚本文件后台运行

    1.修改startup.bat文件 rem Get remaining unshifted command line arguments and save them in the set CMD_LI ...

  5. 论文翻译：2015_DNN-Based Speech Bandwidth Expansion and Its Application to Adding High-Frequency Missing Features for Automatic Speech Recognition of Narrowband Speech

    论文地址:基于DNN的语音带宽扩展及其在窄带语音自动识别中加入高频缺失特征的应用 论文代码:github 博客作者:凌逆战 博客地址:https://www.cnblogs.com/LXP-Never ...

  6. 常用传输层协议(tcp/ip+udp)与常用应用层协议简述(http)

    一.计算机网络体系结构 二.TCP与UDP差异 1.TCP是面向连接的可靠传输,UDP是面向无连接的不可靠传输 面向连接表现在3次握手,4次挥手:可靠传输表现在未进行4次挥手时的差错重传,超时重传: ...

  7. Android之ScrollView嵌套ListView冲突 (listView只显示一行)

    在ScrollView中嵌套使用ListView,ListView只会显示一行多一点.两者进行嵌套,即会发生冲突.由于ListView本身都继承于ScrollView,一旦在ScrollView中嵌套 ...

  8. 消息队列MQ(一)

    消息队列 为什么要用消息队列,都有什么优缺点? 要问的是消息队列都有哪些场景,然后项目里具体实现的什么场景,你在这个场景里用的什么消息队列? 期望的回答是,你们公司有个什么业务,这个业务场景有什么技术 ...

  9. Linux部署MongoDB

    下载安装包 打开网站 https://www.mongodb.com/download-center/community查找与Linux版本一致的MongoDB安装包.我这里选择安装包格式为tgz压缩 ...

  10. PR2018制作电子相册

    PR2018制作电子相册 新建序列,自定义的参数 重置工作区域的面板 调节声音的大小 剪辑区域小图标的功能介绍 1,点亮状态表示可以自动对齐吸附,方便拼接视频,2,图标表示视频接音频同时选中的,不点亮 ...