利用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. 网络编程之socket

    网络编程之socket socket:在网络编程中的一个基本组件,也称套接字. 一个套接字就是socket模块中的socket类的一个实例. 套接字包括两个: 服务器套接字和客户机套接字 套接字的实例 ...

  2. 安装oracle常见问题和解决方案

    ./runInstaller: line 95: [: too many arguments ./runInstaller: line 99: /home/oracle/oracle/database ...

  3. bzoj4260

    题目大意:求不相交的两段区间,两段的异或和加起来最大是多少 区间异或和记得转化成前缀和啊我个sb 变成一对数的异或值就变成trie了啊 两段区间的话,从左往右一颗trie,从右往左一颗trie #in ...

  4. for变量作用域（vc6与vs）

    for变量:写在for循环初始语句中的变量.如:for (int i=1,j=2; i<100; i++) vc6的for变量 int i 的作用域: void func(bool condit ...

  5. 【leetcode】Search for a Range

    题目描述: Given a sorted array of integers, find the starting and ending position of a given target valu ...

  6. Guava学习笔记(4)：Ordering犀利的比较器

    转自:http://www.cnblogs.com/peida/p/Guava_Ordering.html Ordering是Guava类库提供的一个犀利强大的比较器工具,Guava的Ordering ...

  7. JAVA Day8

    1. 引用数据类型需要new 2. 字符串使用的3种方式 String s = "hello world"; String s = new String(); String s = ...

  8. 《DSP using MATLAB》示例Example5.16

    代码: x1 = [1,2,2,1]; x2 = [1,-1,-1,1]; x3 = conv(x1,x2); % N = 5 n1 = 0:1:length(x1)-1; n2 = 0:1:leng ...

  9. WebForm增删改查

    最基本的,拼接字符串在Literal里面显示表,IsPostBack,增删改查基本,?传值 Request接收 LinQ to SQL类 在Default主页里面拖入Literal控件再加入一个按钮, ...

  10. ZZULI 1876: 蛤玮的项链 Hash + 二分

    Time Limit: 6 Sec  Memory Limit: 128 MBSubmit: 153  Solved: 11 SubmitStatusWeb Board Description 蛤玮向 ...