正常情况

如果子元素没有设置浮动（float），父元素的高度会随着子元素高度的改变而改变的。

设置浮动以后

父元素的高度不会随着子元素的高度而变化。

例如：在一个ul中定义若干个li，并设置float='left'

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    *{margin: 0; padding: 0;}

    .demo {

        width: 250px;

        border: 1px solid #ccc;

        padding: 10px;

        margin: 20px auto;

    }

    li {

        list-style: none outside none;

        float: left;

        height: 20px;

        line-height: 20px;

        width: 20px;

        border-radius: 10px;

        text-align: center;

        background: #f36;

        color: green;

        margin-right: 5px;

    }

    .demo * {

        background: orange;

    }

    </style>

</head>

<body>

    <ul class="demo">

        <li class="first" id="first">1</li>

        <li class="active">2</li>

        <li class="important item" >3</li>

        <li class="important" >4</li>

        <li class="item">5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

        <li>9</li>

        <li class="last" id="last">10</li>

    </ul>

</body>

</html>

显示结果就会是这样：

解决办法

  1. 最简单的方法是，给父元素增加overflow:hidden
.demo {

        width: 250px;

        border: 1px solid #ccc;

        padding: 10px;

        margin: 20px auto;

        overflow: hidden;

    }
  1. 在子元素的最后一个清除浮动
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    *{margin: 0; padding: 0;}

    .clearfix::after, .clearfix::before {

        display: table;

        content: '';

    }

    .clearfix::after {

        clear: both;

        overflow: hidden;

    }

    .demo {

        width: 250px;

        border: 1px solid #ccc;

        padding: 10px;

        margin: 20px auto;

    }

    li {

        list-style: none outside none;

        float: left;

        height: 20px;

        line-height: 20px;

        width: 20px;

        border-radius: 10px;

        text-align: center;

        background: #f36;

        color: green;

        margin-right: 5px;

    }

    .demo * {

        background: orange;

    }

    </style>

</head>

<body>

    <ul class="clearfix demo">

        <li class="first" id="first">1</li>

        <li class="active">2</li>

        <li class="important item" >3</li>

        <li class="important" >4</li>

        <li class="item">5</li>

        <li>6</li>

        <li>7</li>

        <li>8</li>

        <li>9</li>

        <li class="last" id="last">10</li>

    </ul>

</body>

</html>

【css】子元素浮动到了父元素外，父元素没有随子元素自适应高度，如何解决？的更多相关文章

  1. DIV+CSS布局中自适应高度的解决方法

    div乱跑问题  (文件<DIV+CSS布局中自适应高度的解决方法.rar>)   float 是个很危险的东西 得小心使用 本来有一很好的关于CSS+DIV的论坛 不过现在关门了 甚是可 ...

  2. CSS浮动属性，知道原理就很简单,灵活控制块级元素在一行内显示

    在页面布局中,有两个非常常用的CSS属性.它们巧妙的控制着块级元素们之间的位置,灵活的让块级元素在一行内显示或者另起一行.说到这里,相信大家已经猜出来了,这两个属性就是控制块级元素浮动的属性.整个页面 ...

  3. 子元素浮动父容器高度不能自适应的CSS解决方法

    百度标题:子元素浮动父容器高度不能自适应的CSS解决方法 从第二份工作开始,已经不怎么写样式了,然后就忘记了一部分,有的也生疏了. 今天碰到子元素意外挤到一起的问题,就问公司前端工程师是怎么回事,F1 ...

  4. 关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案

    以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-b ...

  5. 关于自适应屏幕，设置子元素浮动，父div不能包裹子div，子元素中内容溢出的问题。

    设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content">< ...

  6. 透视 HTML子元素的margin-top样式会应用在父元素上的原由

    情况说明 当对页面中元素设置margin-top样式时,如果该元素有父元素,则margin-top会应用与父元素,子元素的top与父元素的top重叠.举例说明 <style>body{ma ...

  7. CSS中如果实现元素浮动和清除浮动，看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

  8. HTML 文档流，设置元素浮动，导致父元素高度无法自适应的解决方法（高度欺骗）

    元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...

  9. Web前端面试指导(十九)：CSS样式-如何清除元素浮动？

    题目点评 本题属于比较常问的题目,也是在网页设计中经常遇到的问题,面试官希望通过这样的面试题来了解你对网页设计的基本功底,如果这样的题目答不出来,必会让面试官大失所望,面试成功的概率是非常小的. 答题 ...

  10. CSS中如果实现元素浮动，看这篇文章就足够了

    浮动基本介绍 在标准文档流中元素分为2种,块级元素和行内元素,如果想让一些元素既要有块级元素的特点也同时保留行内元素特点,只能让这些元素脱离标准文档流即可. 浮动可以让元素脱离标准文档流,可以实现让多 ...

随机推荐

  1. __name__='main' 这句代码是什么意思？《读书笔记》

    当我们阅读 别人的python代码都会有 if name == "main"这么一行语句,但却不知道为什么要写这个?有什么用 想知道这段代码什么意思让我们来根据例子来测试一下 我们 ...

  2. 【HDU5289】Assignment

    题目大意:给定一个长度为 N 的序列,求序列中最大值和最小值相差小于 K 的连续段的个数. 题解: 最大值和最小值相差不超过 K 是一个在值域角度的限制,应考虑采用平衡树或权值...数据结构进行维护. ...

  3. java常用类与包装类--包装类

    2.基本数据类型数据的包装类 局部变量中基本数据类型直接分配在栈中,而对象分配在堆中 将基本数据类型封装成对象的好处在于可以在对象中定义更多的功能方法来操作该数据 包装类主要功能:用于基本数据类型与字 ...

  4. HBase 权限控制

    HBase的权限管理依赖协协处理器.所以我们需要配置hbase.security.authorization=true,以及hbase.coprocessor.master.classes和hbase ...

  5. 解决postgresql在docker中无法保存状态的问题

    PS:最佳解决方式是将目录挂载到宿主机,容器出问题了,数据还在,以下方式容器出问题会丢失数据,以下思想只供参考!!! 用过docker的人都知道,docker是不适合来放数据库的,这也不是绝对的.如果 ...

  6. mvn 本地jar包 加入自己的maven仓库

    -Dfile :你的jar的名称 -DgroupId :在pom中的groupId -DartifactId :在pom中的artifactId -Dversion :在pom中的version 在j ...

  7. oracle 7.4安装nvidia驱动

    2019-8-28 参考网页: 如何在k8s集群中安装nvidia.cuda并使用GPU进行训练 https://blog.csdn.net/u013042928/article/details/78 ...

  8. SpringApplication.run 做了哪些事？

    SpringApplication.run一共做了两件事,分别是 创建SpringApplication对象 利用创建好的SpringApplication对象,调用run方法论 结论: 面试官: 我 ...

  9. AJAX 实例解析

    AJAX 实例 为了帮助您理解 AJAX 的工作原理,我们创建了一个小型的 AJAX 应用程序: 实例 AJAX 不是新的编程语言,而是一种使用现有标准的新方法.深圳dd马达 AJAX 是与服务器交换 ...

  10. 【canvas学习笔记八】像素操作

    ImageData对象 ImageData对象包含了一个区域内的canvas的像素信息.它包含以下可读属性: width canvas的宽度,单位是像素. height canvas的高度,单位是像素 ...