利用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. js延迟3秒后跳转

    setTimeout("location.href='onlineUser/login'",3000);

  2. .deb包的安装方法

    deb是Debian linux的安装格式,跟redhat的rpm非常相似,最基本的安装命令是: dpkg -i file.deb dpkg是Debian Package的简写,是为Debian专门开 ...

  3. Git学习总结

    master主分支合并dev分支,代码 :git merge dev ,跳出如下界面.输入:wq,(:wq命令是LINUX命令,强制写入文件并结束),可以强制合并.但为什么会跳出该界面,我也没搞清楚. ...

  4. SQL入门语句之运算符

    运算符是一个保留字或字符,主要用于连接WHERE后面的条件. 一.算数运算符 运算符 描述 + 加法 - 把运算符两边的值相加 - 减法 - 左操作数减去右操作数 * 乘法 - 把运算符两边的值相乘 ...

  5. LeetCode之344. Reverse String

    ------------------------------- Java也可以实现一行代码反转字符串哦 AC代码如下: public class Solution { public String re ...

  6. hdu 1501 Zipper

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=1501 思路:题目要求第三个串由前两个组成,且顺序不能够打乱,搜索大法好 #include<cstdi ...

  7. navigation和tabbar上的文字.图片 自定义

    [[UITabBarItem appearance] setTitleTextAttributes:@{ UITextAttributeTextColor : [UIColor blackColor] ...

  8. 解决 SVN Skipped 'xxx' -- Node remains in conflict

    svn 提交报错 提交命令: svn update 提示代码: Skipped 'ApiController.php' -- Node remains in conflict At revision ...

  9. 【Jsoup网页解析】

    下载链接:http://jsoup.org/download 一.普通的请求方式(不带有cookie) 使用举例: 第一步: Connection conn=Jsoup.connect(url); 第 ...

  10. 神经网络及其PID控制

    一.人工神经元模型 1.突触权值(连接权) 每一个突触都由其权值作为特征表征,各个神经元之间的连接强度由突触权值来表示.与神经元相连的突触上,连接的输入信号通过权值的加权进入神经元的求和单元. 2.求 ...