<!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. django中filter()和get()的区别

    在django中,我们查询经常用的两个API中,会经常用到get()和filter()两个方法,两者的区别是什么呢? object.get()我们得到的是一个对象,如果在数据库中查不到这个对象或者查找 ...

  2. 【转】Linux(CentOS) vps安装xfce桌面+VNC

    以前我发过一篇文章利用vnc远程连接VPS桌面,其中用到的是kde桌面,后来知道xfce总体来说比kde占得内存还小些,因为xfce轻便.简单,今天因为一些原因需要在我的vps上搭建用户桌面,所以就试 ...

  3. solr 如何实现精确查询

    第一条和第三条不应该出现的. 解决办法

  4. 史上最全Redis面试题及答案。

    花了大量时间整理了这套Redis面试题 首发50题,绝无仅有,从入门到精通 从基础,高级知识点,再到集群,运维,方案- 弄明白了这些题可以说可以成为面霸了 面试官都得折服,Redis学得怎么样,都来检 ...

  5. Substring UVA - 11468 AC自动机+概率DP

    题意: 给出一些字符和各自对应的选择概率,随机选择L次后得到一个长度为L的随机字符串S. 给出K个模板串,计算S不包含任何一个模板串的概率 dp[i][j]表示走到AC自动机 i 这个节点 还需要走 ...

  6. WinDbg神断点

    https://blogs.msdn.microsoft.com/alejacma/2007/10/31/cryptoapi-tracer-script/ 我得多少年才能学会这种写法.

  7. SQLAlchemy连接数据库创建表

    # 连接数据库,创建表 def create_all(): engine = create_engine( 'mysql+pymysql://root:123456@127.0.0.1:3306/sq ...

  8. iOS组件化开发-发布私有库

    远程索引库 将远程索引库添关联到本地 pod repo 查看本地已关联仓库源 pod repo add 本地索引库名称 远程索引库仓库地址 pod repo update 索引库名称 pod repo ...

  9. Linux 常用命令：开发调试篇

    前言 Linux常用命令中有一些命令可以在开发或调试过程中起到很好的帮助作用,有些可以帮助了解或优化我们的程序,有些可以帮我们定位疑难问题.本文将简单介绍一下这些命令. 示例程序 我们用一个小程序,来 ...

  10. Android开发 View的UI刷新Invalidate和postInvalidate

    Invalidate 正常刷新 /** * 使整个视图无效.如果视图可见, * {@link #onDraw(android.graphics.Canvas)} 调用此方法后将在后续的UI刷新里调用o ...