利用float进行页面布局时常常会出现父级元素没有高度的塌陷问题，如以下代码：

<!DOCTYPE html>

<html>

    <head lang="en">

        <meta charset="UTF-8">

        <title></title>

    </head>

    <style>

 .father-div{

            background-color: #000000;

            /*overflow: hidden;*/

 }

        .items{

            margin: 10px;

 float: left;

 height: 100px;

 background-color: #FF0000;

 }

        .next-div{

            background-color: #0099FF;

 height: 100px;

 }

    </style>

    <body>

        <div class="father-div">

            <div class="items">第一个</div>

            <div class="items">第二个</div>

            <div class="items">第三个</div>

            <div style="clear:both"></div>

        </div>

        <div class="next-div">next-div</div>

    </body>

</html>

实际出现的界面如下：

和预期的效果不太一样：

解决上诉问题的方式：

（1） 在父级元素上添加overflow:hidden属性，可以将父级元素撑大

（2） 在最后一个子元素后加入<div style="clear:both;"></div>，清除浮动元素。

（3） 直接给父级元素添加宽高（这种情况的需要需要在已知子元素的宽高的情况下）

推荐使用前两种方式

float导致父级元素塌陷的问题的更多相关文章

  1. CSS-position 属性&元素脱离文档流引发父级边框塌陷问题

    CSS-position 属性 CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动(float)和绝对定位(position). 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中 ...

  2. float浮动问题：会造成父级元素高度坍塌；

    float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...

  3. CSS清除浮动使父级元素展开的三个方法

    点评:一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开,下面举个例子为大家详细介绍下,希望对大家有所帮助 一个没有 ...

  4. css使absolute相对于父容器进行定位而不是以body（为什么绝对定位（absolute）的父级元素必须是相对定位（relative））

    借知乎的回答如下解释: 首先,我想告诉你的是,如果父级元素是绝对定位(absolute)或者没有设置,里面的绝对定位(absolute)自动以body定位.这句话是错的.正确的是:只要父级元素设了po ...

  5. 关于chart.js 设置canvas的宽度为父级元素的宽度的百分百 以及 X轴上面刻度数据太多如何处理

    今天在做一个数据统计的界面的时候,需要做折线统计图,在网上找了一圈发现数据统计的插件还是不少的,本着轻量级的的原则选择了Chart.js,后来在做的过程中便遇到两个问题,以此记录下来,和刚刚接触前端的 ...

  6. JQuery 获取父级元素、同级元素、子元素等

    例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...

  7. jquery选择器 之 获取父级元素、同级元素、子元素

    jquery选择器 之 获取父级元素.同级元素.子元素 一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div" ...

  8. jquery选择器如何获取父级元素、同级元素、子元素

    一.新建页面 <ul> <li>list item 1</li> <li>list item 2</li> <li class=&qu ...

  9. 为什么我们要给父级元素写overflow:hidden

    有这样的一种情况,有的时候,我们的父级元素设置了高度,一般来说,父级元素的高度是根据子元素的高度来自适应撑开的,如果我们的父级元素也设置了高度,那么其高度就不会随着子元素的的大小而自适应,也许有的时候 ...

随机推荐

  1. ffmpeg-20160926[27]-bin.7z

    ffplay 2016.09.26 开始使用 SDL 2.x , CPU 利用率比 SDL 1.x 略微好一些. ESC 退出 0 进度条开关 1 屏幕原始大小 2 屏幕1/2大小 3 屏幕1/3大小 ...

  2. ubuntu下安装mcrypt

    sudo apt-get install libmcrypt4 php5-mcrypt 一句命令搞定

  3. JavaScript和JQuery好书推荐

    其实无论你是php/python/java还是c/c++,只会自己那点知识是无法独立完成一个站点的建设的! 如果你因自己能力不足拒绝过几次亲友的建站请求,或者因合作中不了解前端是什么东西而失去过几次创 ...

  4. SpringMVC拦截器

    springmvc的拦截器 需求:进行用户的访问控制,判断用户是否登陆,如果登陆进行正常访问,如果没有登陆跳转到登陆页面. 1自定义拦截器类 package org.guangsoft.utils; ...

  5. JS中多种方式创建对象

    1.内置对象创建 var girl=new Object(); girl.name='hxl'; console.log(typeof girl); 2.工厂模式,寄生构造函数模式 function ...

  6. python之OS模块详解

    python之OS模块详解 ^_^,步入第二个模块世界----->OS 常见函数列表 os.sep:取代操作系统特定的路径分隔符 os.name:指示你正在使用的工作平台.比如对于Windows ...

  7. 第一章 Web应用程序简介

    1.1 Web应用程序基础知识 URL.URN与URI URL:Uniform Resource Locator URN:Uniform Resource Name URI:Uniform Resou ...

  8. 大公司的PHP面试题

    1. 禁用COOKIE 后 SEESION 还能用吗? 2. 抓取远程图片到本地,你会用什么函数? 4. 你觉得在pV10W的时候, 同等配置下,LUNIX 比WIN快多少? 5. 简述pOST 和G ...

  9. VR技术的系统化实现阶段

    转载请声明转载地址:http://www.cnblogs.com/Rodolfo/,违者必究. 从20世纪80年代至80年代中期,虚拟现实技术的基本概念开始逐渐形成和完善.这一时期出现了一些比较经典的 ...

  10. MyEclipse Project Migration功能中文简单介绍

    前端时间,我对myEclispe的project Migration产生了疑问,也不知道是干啥用的.然后百度之,翻译结果是项目迁移,再次百度其他人对这个的经验,没想到百度到的没多少,甚至都没有说明这个 ...