<!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. ARC032 D - アットコーダーモンスターズ

    https://arc032.contest.atcoder.jp/tasks/arc032_4# 切比雪夫距离,放在3000*3000的平面上, 一个集合就是恰好包含这个集合的矩形,价值是矩形长.宽 ...

  2. OpenStack与KVM的区别与联系

    转:https://www.aliyun.com/zixun/content/2_6_280418.html OpenStack与KVM都是目前IT界比较热门的两个词汇.它们都是开源的,都与Linux ...

  3. Spring-Security (学习记录七)--实现FilterInvocationSecurityMetadataSource的类将无法切入声明式事物

    目录 1 查看继承关系 2 说明 3 查看源码: 实现了FilterInvocationSecurityMetadataSource 的类将无法切入声明式事物. 原因: 1 查看继承关系 先查看Fil ...

  4. CSS3：教程

    ylbtech-CSS3:教程 1.返回顶部 1. CSS3 教程 CSS 用于控制网页的样式和布局. CSS3 是最新的 CSS 标准. 本教程向您讲解 CSS3 中的新特性. 开始学习 CSS3! ...

  5. 20140307 引用赋值、类的初始化、指针数组、数组指针、new

    引用不能被赋值http://blog.csdn.net/laixingjun/article/details/9005200 类构造函数两种初始化方法区别,哪种好:http://blog.163.co ...

  6. python学习6—数据类型之集合与字符串格式化

    python学习6—数据类型之集合与字符串格式化 1. 使用id()可以查看一个变量的内存地址: name = 'alex' id(name) 2. 进制转换 十进制转换为二进制等: a = 10 # ...

  7. 2008年最佳Web设计/前端开发技巧、脚本及资源总结

    工具&Web应用 13个可能会让你说”Thank You”的必不可少的开源应用 14个免费工具让你了解为什么人们会放弃访问你的网站 40+CSS生成器 74个我们可能已经忘记的适合网页设计师的 ...

  8. Visual Studio Git代码管理环境部署

    Visual Studio 2010 部署Git代码管理环境. 第一:首先做Git的安装和环境部署 1.下载并安装Git软件,在windows环境下的Git叫做“msysGit”,官网地址为https ...

  9. Python｜读、写Excel文件（三种模块三种方式）

    python读写excel的方式有很多,不同的模块在读写的讲法上稍有区别: 用xlrd和xlwt进行excel读写: 用openpyxl进行excel读写: 用pandas进行excel读写: imp ...

  10. ubuntu卸载node和npm

    sudo apt-get remove --purge npm sudo apt-get remove --purge nodejs sudo apt-get remove --purge nodej ...