<!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. class5_Radiobutton 选择按钮（选项选择）

    最终的运行效果图(程序见序号4) #!/usr/bin/env python# -*- coding:utf-8 -*-# -------------------------------------- ...

  2. 注意：阿里Druid连接池监控的两个坑

    阿里的Druid大家都知道是最好的连接池,其强大的监控功能是我们追求的重要特性.但在实际情况中也有不少坑,说下最近遇到的一个坑吧! 问题1:不断打印error级别的错误日志 session ip ch ...

  3. sshpass批量分发ssh秘钥

    首先安装sshpass: yum -y install sshpass 单条命令: sshpass -p“password” ssh-copy-id -i /root/.ssh/id_rsa.pub ...

  4. USACO 2011 February Silver Cow Line /// 康拓展开模板题 oj22713

    题目大意: 输入n k,1-n的排列,k次操作 操作P:输入一个m 输出第m个排列 操作Q:输入一个排列 输出它是第几个排列 Sample Input 5 2P3Q1 2 5 3 4 Sample O ...

  5. 【转】Java程序CPU飙升问题排查方法

    windows环境下cpu飙升问题 线上某台runtime机器(windows Server)cpu报警,这种情况初步就是代码里面死循环了,先把机器下线了保证不再有新的任务分配进来,然而cpu使用依然 ...

  6. 基于第三方开源库的OPC服务器开发指南（4）——后记：与另一个开源库opc workshop库相关的问题

    平心而论,我们从样例服务器的代码可以看出,利用LightOPC库开发OPC服务器还是比较啰嗦的,网上有人提出opc workshop库就简单很多,我千辛万苦终于找到一个05年版本的workshop库源 ...

  7. ionic js 滑动框ion-slide-box 滑动框是一个包含多页容器的组件，每页滑动或拖动切换

    ionic 滑动框 ion-slide-box 滑动框是一个包含多页容器的组件,每页滑动或拖动切换: 效果图如下: 用法 <ion-slide-box on-slide-changed=&quo ...

  8. Linux内存 mem 和 swap

    摘抄并用于自查 Linux mem/swap/buffers/cached区别 free命令相对于top,提供了更简洁的查看系统内存使用情况: # free -m mem:表示物理内存统计 buff/ ...

  9. vue v-model :

    v-model : 通过v-model 进行双向绑定 ,将data的数据与input 绑定在一起,呈现在页面上 <!DOCTYPE html> <html lang="en ...

  10. Java 基础 - java序列化 & serialVersionUID

    ref: https://www.cnblogs.com/duanxz/p/3511695.html ------------------- SerialVersionUID概述 SerialVers ...