<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

              .box1{

                     border:1px red solid;

              }

              .box2{

                      height:100px;

                    width:100px;

                    background-color:red;}

              .box3{

                      height:100px;

                    width:100px;

                    background-color:yellow;}

        </style>

    </head>

    <body>

          <div class="box1"><div class="box2"></div></div>

          <div class="box3"></div>

    </body>

</html>

首先生成三个div       第一个div设置边框并且包含第二个div     第三个div设置宽和高

运行并未出现高度塌陷问题，当我们让第二个div的box2里面添加    float: left;   浮动的时候就会出现

浮动时我们写滑动图片，要用的必要元素，为解决以上问题，有一下两种解法方法

第一种方法用

zoom:1;
overflow: hidden;

开启div的BFC

* 当开启元素的BFC以后，元素将会具有如下的特性：
* 1.父元素的垂直外边距不会和子元素重叠
* 2.开启BFC的元素不会被浮动元素所覆盖
* 3.开启BFC的元素可以包含浮动的子元素

第二种方法

可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，
* 这样做和添加一个div的原理一样，可以达到一个相同的效果，
* 而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用

在父级div种添加

.clearfix:after{

                /*添加一个内容*/

                content: "";

                /*转换为一个块元素*/

                display: block;

                /*清除两侧的浮动*/

                clear: both;

            }

            /*

             * 在IE6中不支持after伪类,

             *     所以在IE6中还需要使用hasLayout来处理

             */

            .clearfix{

                zoom:1;

            }

html--浮动高度塌陷问题的更多相关文章

  1. CSS笔记 - fgm练习 2-10 - 提示框效果 （清除子元素浮动高度塌陷的影响）

    CSS清除浮动方法参考: https://blog.csdn.net/promiseCao/article/details/52771856 <style> *{ margin: 0; p ...

  2. 浮动引发的高度塌陷问题及其解决方法(BFC相关概念及性质)

    浮动引发的高度塌陷问题 高度塌陷问题的产生 BFC(Block Formatting Context)的引入 元素开启BFC后的特点 开启BFC的元素不会被其他浮动元素所覆盖 开启BFC的元素不会发生 ...

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

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

  4. css浮动导致的高度塌陷问题及清楚浮动的方法

    浮动很好用,但是用浮动后,当浮动元素的父级元素没有高度时,就会造成高度塌陷,从而影响布局.下面就从一开接触前端时,渐渐发现解决高度塌陷的问题的方式. 一.给浮动元素的父级元素添加固定的高度css[he ...

  5. 浮动和包含框的关系，伪元素after解决高度塌陷

    浮动会使元素尽量向左或向右移动,直到碰到包含框或另外一个浮动元素的盒子模型的边缘 包含框并不会改变里面浮动元素的宽高,浮动元素宽高不会限制在包含块以内 <!DOCTYPE html> &l ...

  6. float浮动造成高度塌陷的解决办法

    Float是我们在页面布局中常用的,也是非常重要的一个属性,可以让页面布局变得更加灵活. 但是在继续学习之后,尤其是掌握了宽高自适应之后,我们常常会发现一个奇怪的现象:如果父元素没有设置高度,而子元素 ...

  7. CSS浮动布局带来的高度塌陷以及其解决办法

    1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...

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

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

  9. CSS高度塌陷

    问题描述:当父元素只包含浮动的元素的时候,且父元素没有设置高度,如果父元素设置了边框border,那么看起来子元素不在父元素之内. 比如这样: html: <div id="paren ...

  10. CSS: inline-block的应用和float块高度塌陷

    普通流高度塌陷: 当块float浮动时,不会对块布局产生影响,块仍然会按照左右或者上下的顺序排列.但是会影响文档的排列,当文档的高度超过块的高度时,块的高度会产生塌陷现象.   高度塌陷解决方法:   ...

随机推荐

  1. 2019NOIP算法复健+学习

    前言: 原本因为kma太弱,很多算法没学学了也不会用,打算设置密码给自己看.后来想了想,觉得也没有必要,既然决定了要学些东西到脑子里,就没什么好丢人的. 注:"×"意为完全没学,& ...

  2. 牛客多校第十场 E Hilbert Sort 递归，排序

    题意: 给你一个方阵,再在方阵上给定一些点,按照希尔伯特曲线经过的先后顺序为这些点排序 题解: 定义好比较函数后直接调用排序算法即可. 希尔伯特曲线本来就是用于二维到一维的映射的,因此我们可以考虑对于 ...

  3. Contos7 FTP 安装步骤

    1. 使用rpm -q vsftpd查看是否已安装2.如未安装使用yum -y install vsftpd安装3.修改ftp配置文件vim /etc/vsftpd/vsftpd.conf,修改内容如 ...

  4. hashCode和identityHashCode的区别你知道吗？

    hashCode 关于hashCode参考之前的文章,点击参考之前文章. identityHashCode identityHashCode是System里面提供的本地方法,java.lang.Sys ...

  5. 我写的界面，在ARM上跑

    这个...其实,我对ARM了解并不多,我顶多也就算是知道ARM怎么玩,EMMC干啥,MMU干啥,还有早期的叫法,比如那个NorFlash NandFlash ,然后也就没啥了. 然后写个裸机什么的,那 ...

  6. GenericServlet简介和使用

    GenericServlet:抽象类 是Servlet接口的抽象类,为Servlet接口中的一些方法做了空实现,只将service()方法作为抽象方法 Servlet代码实现GenericServle ...

  7. 如果json中的key需要首字母大写怎么解决？

    一般我们命名都是驼峰式的,可是有时候和第三方接口打交道,也会遇到一些奇葩,比如首字母大写........额 这是个什么鬼,对方这么要求,那我们也得这么写呀. 于是乎,第一种方式:把类中的字段首字母大写 ...

  8. iOS开发系列-Lock

    概述 我们在使用多线程的时候多个线程可能会访问同一块资源,这样就很容易引发数据错乱和数据安全等问题,这时候就需要我们保证每次只有一个线程访问这一块资源,锁 应运而生. iOS中锁之前的性能的图标排行: ...

  9. JS对象 charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。

    返回指定位置的字符 charAt() 方法可返回指定位置的字符.返回的字符是长度为 1 的字符串. 语法: stringObject.charAt(index) 参数说明: 注意:1.字符串中第一个字 ...

  10. SVN Cannot merge into a working copy that has local modifications

    我尝试了 主支,分支都提交,但是依然无法合并. 最终,我在服务器上将分支删除,然后主支在拷贝过去. 一,打开服务器资源 二,删除分支 三,拷贝主支到分支 四,刷新分支,就能看到了. 然后在分支项目中, ...