正常情况

如果子元素没有设置浮动（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. hexo+github+Theme Art Design文章发布

    新建 hexo new "YYYY-MM-DD-title" 为了更好的标识文章和防止重复,文章对应的markdown文件的命名应该遵循:YYYY-MM-DD-title 格式. ...

  2. vue 搜索关键词 变颜色

    <a class="text"> <span>{{item.name.slice(0,item.name.toLowerCase().indexOf(inp ...

  3. 【leetcode】1201. Ugly Number III

    题目如下: Write a program to find the n-th ugly number. Ugly numbers are positive integers which are div ...

  4. canal 环境搭建 kafka Zookeeper安装（二）

    第一步 创建Zookeeper 下载完成后 修改 Zookeeper中的 zoo.cfg 修改 dataDir .dataLogDir 集群模式 server.1=ServerIP:2888:3888 ...

  5. Nginx做反向代理时访问端口被自动去除

    使用的Nginx版本 : nginx/1.13.10 出现问题的配置文件如下 upstream http-web { server 0.0.0.0:9000; } server { listen 80 ...

  6. C# 获得对象的命名空间 ?.

    A a = new A(); var t = a?.ToString(); //t = WebApplication1.Controllers.A //获得命名空间和类名 var t1 = (A)nu ...

  7. python Tkinter 组件

    Tkinter的提供各种控件,如按钮,标签和文本框,一个GUI应用程序中使用.这些控件通常被称为控件或者部件. 目前有15种Tkinter的部件.我们提出这些部件以及一个简短的介绍,在下面的表: 控件 ...

  8. java实现视频断点上传文件

    一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content- ...

  9. [luogu]P1070 道路游戏[DP]

    [luogu]P1070 道路游戏 题目描述小新正在玩一个简单的电脑游戏.游戏中有一条环形马路,马路上有 n 个机器人工厂,两个相邻机器人工厂之间由一小段马路连接.小新以某个机器人工厂为起点,按顺时针 ...

  10. 搭建一套简单的web服务器，记录实验过程

    搭建web服务器 一.实验内容: 实验要求: 1.完成一个简单的web服务器,web服务器从mysql里读取数据进行返回 2.Mysql需要有一个单独的数据盘,每个mysql虚拟机的磁盘挂载方式需要都 ...