利用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. winrt简单克隆对象

    public MapPoint Copy()//MapPoint克隆方法 { MapPoint p = new MapPoint();//这是我自定义的对象 //利用反射获得类成员 FieldInfo ...

  2. .NET LINQ 聚合操作

    聚合操作      聚合运算从值集合计算单个值. 从一个月的日温度值计算日平均温度就是聚合运算的一个示例. 方法 方法名 说明 C# 查询表达式语法 Visual Basic 查询表达式语法 更多信息 ...

  3. iOS中关于NavigationController中preferredStatusBarStyle一直不执行的问题

    重点:真的能改吗?跑起来毛用没有. 1.还要在plist文件里把View controller-based status bar appearance设置成YES. 2.一定要写UINavigatio ...

  4. VS更改编辑窗背景

    打开Visual Studio  工具→扩展和更新→联机  在搜索框里输入“background”后,搜索结果有很多插件可以更改 Visual Studio 的背景,选择其中的一项,可以在右边进行预览 ...

  5. scala安装

    一:在官网下载相应的版本http://www.scala-lang.org/download/2.10.6.html 二,在linux中解压下载下来的scala包   三:配置环境变量 export ...

  6. 统一配置管理-百度disconf

    之前一直采用properties文件管理配置信息,若是集群则每个机器上都要拷贝一份,每次修改也需要依次修改.一直在寻找统一修改,实时生效,方便修改,分环境分系统的配置管理,自己也在整理设计,若找不到合 ...

  7. 与你相遇好幸运，Sailsjs查询

    sailsjs 原生查询 ------------------------------------- Lands.native(function(err, collection) { if (err) ...

  8. 【leetcode】Triangle (#120)

    Given a triangle, find the minimum path sum from top to bottom. Each step you may move to adjacent n ...

  9. AgileEAS.NET SOA 中间件平台.Net Socket通信框架-简单例子-实现简单的服务端客户端消息应答

    一.AgileEAS.NET SOA中间件Socket/Tcp框架介绍 在文章AgileEAS.NET SOA 中间件平台Socket/Tcp通信框架介绍一文之中我们对AgileEAS.NET SOA ...

  10. SpringMVC 常用注解(1)

    /**  * @RequestMapping 除了修饰方法 还可以修饰类  * 1).类定义处:提供初步的请求映射信息,相当于WEB应用的根目录  * 2).方法定义处,提供进一步的细分映射信息,相对 ...