方法一:对父级设置固定高度

假如以上案例,我们知道内部div高度100px,那对父级设置css height为100px看看效果。

此方法缺点,父级是固定高度,而不随内容高度自适应高度,没高度。此方法针对能确定父div内的内容高度情况下使用。

方法二:使用css clear清除浮动

在父级div标签闭合</div>前加一个clear清除浮动对象。

此方法需要注意是clear:both加的位置,不是对父级直接加clear样式,而是在父级</div>前加带clear对象盒子。

方法三:对父级样式加overflow样式

此方法非常简单,也可以作为推荐解决父级不能被撑开自适应高度的方法,可以不增加div盒子对象,只需要对父级加一个overflow:hidden样式即可。

子级用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的更多相关文章

  1. CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...

  2. 解决子级用css float浮动 而父级div没高度不能自适应高度

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...

  3. 子级用css float浮动 而父级div没高度不能自适应高度

    子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...

  4. 子级用css float浮动 而父级不能自适应高度解决方法

    解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...

  5. 子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题

    方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...

  6. css float 浮动是个混球

    得说,在学习 CSS 的时候就一直在疑惑,横排布局干嘛要用 float 这种属性, 用了还会高度塌陷,怎么不发明些高级点的属性来完成横排布局呢, 甚至所有人都告诉我摒弃表格布局,浮动布局才是 DIV+ ...

  7. css - float浮动模块的高度问题 解决方案

    当一个Div中的子元素都是浮动元素时,该div是没有高度的.通常会带来很多困扰,解决方案如下: 低版本统配兼容: overflow: hidden; 下面是不支持低配浏览器,而且似乎该效果对 P 标签 ...

  8. Jquery遍历之获取子级元素、同级元素和父级元素

    Jquery遍历之获取子级元素.同级元素和父级元素 Jquery的遍历,其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素.以某项选择开始,并沿着这条线进行移动,或向上(父级). ...

  9. float 浮动 文档流和文字流区别

    关于float属性的脱离文档流的问题 使用float浮动后,元素虽然会脱离文档流,但还处在文本流的位置当中,所以就不会出现重叠的效果吗? 下面我自己试了一下,给两个DIV分别设置了样式,而只给第一个D ...

随机推荐

  1. nginx日志切割(logrotate或shell脚本)

    nginx自己不会对日志文件进行切割,可以通过两种不同的方式进行,分别是:通过logrotate和通过shell脚本. 如果是yum方式安装的nginx,系统默认会自动通过logrotate这个日志管 ...

  2. idea右键无法新建Java Class

    项目中新建目录之后,要在该目录下新增java Class文件,右键——>New发现无对应选项. 原因:新建目录之后需要设置目录作用,从而让idea识别. 方法:File-Project Stru ...

  3. Winform让扫描枪听话,防止在有焦点的地方就扫码输入的尴尬

    关注点: 1.扫描枪在扫描到条码后会在有焦点的地方显示扫描到的条码并且可设置扫码后添加回车换行让我很尴尬 2.怎样拦截扫码输入,扫描到条码就自动会嘀一声.不要这么智能行不行.瞎BB 需求详解 公司生产 ...

  4. Day3 Numerical simulation of optical wave propagation之标量衍射理论基本原理(三)

    3.标量衍射理论 光源通常不是简单地平面.球面或高斯光束波.对于更一般的情况,必须使用更老练的方法来求解标量赫姆霍兹方程,需要利用格林定理并灵活使用边界条件. 基本问题:给定源平面光场U(x1,y1) ...

  5. 删除a表中和b表相同的数据

    删除a表中和b表相同的数据 - 冯索的专栏 - CSDN博客https://blog.csdn.net/wugouzi/article/details/9374329 oracle 查找A表存在B表不 ...

  6. Laravel 框架结构 以及目录文件解读(学习笔记)

    composer下载Laravel 5.4(由于PHP版本仅7.0,故未下载5.6) composer create-project laravel/laravel your-project-name ...

  7. libstdc++.so.6: cannot open shared object file: No such file or directory

    sudo apt-get install lib32stdc++6 sudo apt-get install lib32z1

  8. 建立ftp服务器的网址

    https://jingyan.baidu.com/article/574c5219d466c36c8d9dc138.html

  9. Django 视图系统

    Django 视图系统 概念 一个视图函数,简称视图,是一个简单的Python函数,用于接受Web请求并返回Web响应. 通常将视图函数写在project或app目录中的名为views.py文件中 简 ...

  10. CF932 E. Team Work 结题报告

    CF932 E. Team Work 题意 求 \[ \sum_{i=0}^n\binom{n}{i}i^k \] 其中\(n\le 10^9,k\le 5000\),对\(mod=998244353 ...