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

假如以上案例,我们知道内部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. $.extend()浅拷贝深拷贝

    参考网址:http://bijian1013.iteye.com/blog/2255037 jQuery.extend() 函数用于将一个或多个对象的内容合并到目标对象. 注意:1. 如果只为$.ex ...

  2. consul 搭建

    windows 1. 下载consul https://www.consul.io/downloads.html 2. 解压至consul_1.4.2 3.配置环境变量 path下新增D:\work\ ...

  3. EF Core 遇到“可能会导致循环或多重级联路径”

    在ef core中你可能会设计这样一个实体: public class Customer : Entity,IMustHaveTenant, IHasCreationTime { public Cus ...

  4. SpringCloud(6)分布式配置中心Spring Cloud Config

    1.Spring Cloud Config 简介 在分布式系统中,由于服务数量巨多,为了方便服务配置文件统一管理,实时更新,所以需要分布式配置中心组件.在Spring Cloud中,有分布式配置中心组 ...

  5. Day4 Numerical simulation of optical wave propagation之数字傅里叶变换

    标量衍射理论是波动光学模拟的物理基础.这一理论基础的结果是将电磁波在真空中的传播作为线性系统进行处理. 对于单色波,系统观察平面的电场矢量是源平面电场矢量和自由空间脉冲响应的卷积. 因此,线性系统理论 ...

  6. sql 书写 规范 优化

    规范 做注解  便于修改和优化  规范 <?xml version="1.0" encoding="UTF-8"?><!DOCTYPE map ...

  7. Shell命令-文件及内容处理之head、tail

    文件及内容处理 - head.tail 1. head:显示文件内容头部 head命令的功能说明 head 命令用于显示文件头部内容,默认执行 head 命令会输出文件开头的 10 行. head命令 ...

  8. Spring生命周期 Constructor > @PostConstruct > InitializingBean > init-method

    项目中用到了 afterPropertiesSet: 于是具体的查了一下到底afterPropertiesSet到底是什么时候执行的.为什么一定要实现 InitializingBean; **/ @C ...

  9. java多线程2

    今日大部分时间花在了C语言的链表上了,以下是我今日所学习的java多线程内容,今天学习的是多线程里的其他命令,wait,notify,nofityAll,分别是等待,唤醒,全部唤醒. 附今日敲的代码: ...

  10. git安装和GitHub使用

    一.git安装 1.git下载 https://github.com/git-for-windows/git/releases/tag/v2.17.1.windows.2 在如上地址下载git,并安装 ...