正常情况

如果子元素没有设置浮动（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. 指数家族-Beta分布

    2. Beta分布 2.1 Beta分布 我们将由几个问题来得引出几个分布: 问题一:1:  2:把这个  个随机变量排序后得到顺序统计量  3:问  是什么分布 首先我们尝试计算  落在一个区间   ...

  2. return和exit以及C语言递归函数

    return 在主函数main()中,return整个函数退出,在子函数中return,只退出子函数. exit exit无论在函数什么位置退出整个函数 递归函数 #include <stdio ...

  3. 【leetcode】Global and Local Inversions

    题目如下: We have some permutation A of [0, 1, ..., N - 1], where N is the length of A. The number of (g ...

  4. Vue3.0 Function API---------引用

    1.了解 Vue 3.0 是否有 break change,就像 Python 3 / Angular 2 一样? 不,100% 兼容 Vue 2.0,且暂未打算废弃任何 API(未来也不).之前有草 ...

  5. python中的类，对象，实例，继承，多态

    ------------恢复内容开始------------ 类 (通俗来讲是 属性和方法的集合) 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法. 对象,即为类 ...

  6. spring自定义注解实现登陆拦截器

    1.spring自定义注解实现登陆拦截器 原理:定义一个注解和一个拦截器,拦截器拦截所有方法请求,判断该方法有没有该注解.没有,放行:有,要进行验证.从而实现方法加注解就需要验证是否登陆. 2.自定义 ...

  7. Codeforces 919E Congruence Equation ( 数论 && 费马小定理 )

    题意 : 给出数 x (1 ≤ x ≤ 10^12 ),要求求出所有满足 1 ≤ n ≤ x 的 n 有多少个是满足 n*a^n  = b ( mod p ) 分析 : 首先 x 的范围太大了,所以使 ...

  8. UVa 11212 Editing a Book (IDA* && 状态空间搜索)

    题意:你有一篇n(2≤n≤9)个自然段组成的文章,希望将它们排列成1,2,…,n.可以用Ctrl+X(剪切)和Ctrl+V(粘贴)快捷键来完成任务.每次可以剪切一段连续的自然段,粘贴时按照顺序粘贴.注 ...

  9. 【bzoj3223】Tyvj 1729 文艺平衡树

    题目描述: 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3 4 1 输入 ...

  10. 3D Computer Grapihcs Using OpenGL - 20 结合Buffer

    在上一节的案例中,我们使用了四个Buffer Object,立方体的VertexBuffer,立方体的索引Buffer,四面体的VertexBuffer,四面体的索引Buffer. 我们这节尝试把两个 ...