正常情况

如果子元素没有设置浮动（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. python基础练习题6

    01:求1+2!+3!+....+20!的和 s=0 t=1 for n in range(1,21): t*=n s+=t print('1!+2!+3!+.....+20!=%d'%s) 02:利 ...

  2. ArrayList为什么是线程不安全的

    首先需要了解什么是线程安全:线程安全就是说多线程访问同一代码(对象.变量等),不会产生不确定的结果. 既然说ArrayList是线程不安全的,那么在多线程中操作一个ArrayList对象,则会出现不确 ...

  3. 使用 python 开发 Web Service

    使用 python 开发 Web Service Python 是一种强大的面向对象脚本语言,用 python 开发应用程序往往十分快捷,非常适用于开发时间要求苛刻的原型产品.使用 python 开发 ...

  4. JAVA笔记13-异常处理Exception

    掌握:一个图(分类).五个关键字(try catch finally throws throw) 一.概念 定义: 异常指的是运行期出现的错误(如除0溢出,空指针,数组/字符串下标越界,所要读取的文件 ...

  5. 【ZJOI2009】狼和羊的故事

    题目 "狼爱上羊啊爱的疯狂,谁让他们真爱了一场:狼爱上羊啊并不荒唐,他们说有爱就有方向．．．．．．" Orez听到这首歌,心想:狼和羊如此和谐,为什么不尝试羊狼合养呢?说干就干! ...

  6. tensorflow 中 name_scope和variable_scope

    import tensorflow as tf with tf.name_scope("hello") as name_scope: arr1 = tf.get_variable( ...

  7. 使用bitmap实现对一千万个无重复的正整数（范围1~1亿）快速排序

    1 Bytes(字节) == 8 bit 1 KBytes == 1024 Bytes 思路: 1)申请长度为1亿的保存二进制位的数组 a, 2)通过位运算,将整数做为索引,将数组a对应的索引位置为1 ...

  8. C# SqlSugarClient分析一点

    public class UserManager : DbContext<User>{} UserManager userdb = new UserManager(); //创建对象 va ...

  9. _vimrc

    set nocompatible source $VIMRUNTIME/vimrc_example.vim source $VIMRUNTIME/mswin.vim behave mswin set ...

  10. docker-compose安装xxl-job

    docker能安装的docker-compose肯定就能安装,锻炼一下写yml的能力. 后面再具体写实际中的应用 [root@localhost mysql]# cat docker-compose. ...