正常情况

如果子元素没有设置浮动（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. Jmeter性能测试--自己看到的博客收集

    性能测试的场景:https://www.cnblogs.com/little-little-bai/p/10338156.html

  2. 费用流 Dijkstra 原始对偶方法(primal-dual method)

    简单叙述用Dijkstra求费用流 Dijkstra不能求有负权边的最短路. 类似于Johnson算法,我们也可以设计一个势函数,以满足在与原图等价的新图中的边权非负. 但是这个算法并不能处理有负圈的 ...

  3. Python之网路编程之socket简单介绍

    一.网络协议 客户端/服务器架构 1.硬件C/S架构(打印机) 2.软件C/S架构(互联网中处处是C/S架构):B/S架构也是C/S架构的一种,B/S是浏览器/服务器 C/S架构与socket的关系: ...

  4. Docker MongoDB 部署

    docker search mongo 命令来查看可用版本: $ docker search mongo NAME DESCRIPTION STARS OFFICIAL AUTOMATED mongo ...

  5. 详解WebService开发中四个常见问题(1)

    详解WebService开发中四个常见问题(1)   WebService开发中经常会碰到诸如WebService与方法重载.循环引用.数据被穿该等等问题.本文会给大家一些很好的解决方法. AD:WO ...

  6. HDU-3415-Max Sum of Max-K-sub-sequence(单调队列,带限制的最大子段和)

    链接: https://vjudge.net/problem/HDU-3415 题意: Given a circle sequence A[1],A[2],A[3]......A[n]. Circle ...

  7. 两种常用的数据交换格式：XML和JSON

    不同编程语言之间的数据传输,需要一种通用的数据交换格式,它需要简洁.易于数据储存.快速读取,且独立于各种编程语言.我们往往传输的是文本文件,比如我们都知道的csv(comma seperated va ...

  8. JavaScript求取水仙花数

    一.什么是水仙花数 水仙花数也称为超完全数字不变数.自幂数.阿姆斯壮数.阿姆是特朗数. 水仙花数是指一个三位数,每个位数上数字的3次幂之和等于数字它本身. 水仙花数是自幂数的一种,三位的三次自幂数才叫 ...

  9. toJSON() 方法，将 Date 对象转换为字符串，并格式化为 JSON 数据格式。

    JavaScript toJSON() 方法 定义和用法 toJSON() 方法可以将 Date 对象转换为字符串,并格式化为 JSON 数据格式. JSON 数据用同样的格式就像x ISO-8601 ...

  10. 字典,set

    字典 dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度 存取速度快 key-value存储方式,在放进去的时候,必须根据key算出v ...