<!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. C#-Api：身份证识别

    ylbtech-C#-Api:身份证识别 通过POST上传base64格式的图片内容,可识别二代身份证.驾照.行驶证.军官证.中华人民共和国往来港澳通行证.台湾居民往来大陆通行证.大陆居民往来台湾通行 ...

  2. Xcode输出中文

    重写NSArray和NSDictionary分类Category就OK了! 导入头文件 #import <objc/runtime.h> + (void)load { static dis ...

  3. c++ 11新特性学习1

    static_assert 静态断言,特点是编译期的断言检查 assert 运行时期的断言检查 二者参数用法相同

  4. Python生成Windows可执行exe文件

    环境 python3.6.5 pyinstaller3.5 windows 10 下载地址 python:https://www.python.org/ftp/python/3.6.5/python- ...

  5. 协方差及matlib绘制

    转自http://www.cnblogs.com/chaosimple/p/3182157.html 一.统计学的基本概念 统计学里最基本的概念就是样本的均值.方差.标准差.首先,我们给定一个含有n个 ...

  6. !important的用法及作用

    定义及语法 !important,作用是提高指定样式规则的应用优先权(优先级).语法格式{ cssRule !important },即写在定义的最后面,例如:box{color:red !impor ...

  7. Spring+SpringMVC+MyBatis+SpringSecurity+EhCache+JCaptcha 完整Web基础框架（前言）

    简单介绍一下,本框架的基本功能点: Spring:整个框架的主体部分,这个自不用说. SpringMVC:MVC部分我还是比较喜欢Spring的. MyBatis:选型的时候选择这个ORM主要也是考虑 ...

  8. java 打印1到n之间的整数

    package java_day08; /* * 打印1-n之间的整数 * * 递归:方法体自己调用自己 */ public class DiGui { public static void main ...

  9. @Formula

    @Formula  计算临时属性. 相当于可以关联查询字段,然后放在实体中当做属性使用. 任务:在User实体层,增加一个额外的属性,来获取Test表中的name字段. 1 表结构 User表 Tes ...

  10. 关于pip安装较慢的问题解决

    在 ~/.pip/ 下创建文件 pip.conf(如果还没有的话),并填入以下内容: [global] timeout = 6000 index-url = http://pypi.douban.co ...