子级用了float浮动之后,如何撑开父元素,让父元素div自动适应高度

方法一:对父级设置固定高度
假如以上案例,我们知道内部div高度100px,那对父级设置css height为100px看看效果。
此方法缺点,父级是固定高度,而不随内容高度自适应高度,没高度。此方法针对能确定父div内的内容高度情况下使用。
方法二:使用css clear清除浮动
在父级div标签闭合</div>前加一个clear清除浮动对象。
此方法需要注意是clear:both加的位置,不是对父级直接加clear样式,而是在父级</div>前加带clear对象盒子。

方法三:对父级样式加overflow样式
此方法非常简单,也可以作为推荐解决父级不能被撑开自适应高度的方法,可以不增加div盒子对象,只需要对父级加一个overflow:hidden样式即可。
子级用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的更多相关文章
- CSS| 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级用css float浮动 而父级div没高度不能自适应高度 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层 ...
- 解决子级用css float浮动 而父级div没高度不能自适应高度
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子 ...
- 子级用css float浮动 而父级div没高度不能自适应高度
子级对象使用css float浮动 而父级div不能自适应高度. 对父级div标签闭合</div>前加一个clear清除浮动对象. <!DOCTYPE html> <ht ...
- 子级用css float浮动 而父级不能自适应高度解决方法
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个 ...
- 子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题
方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...
- css float 浮动是个混球
得说,在学习 CSS 的时候就一直在疑惑,横排布局干嘛要用 float 这种属性, 用了还会高度塌陷,怎么不发明些高级点的属性来完成横排布局呢, 甚至所有人都告诉我摒弃表格布局,浮动布局才是 DIV+ ...
- css - float浮动模块的高度问题 解决方案
当一个Div中的子元素都是浮动元素时,该div是没有高度的.通常会带来很多困扰,解决方案如下: 低版本统配兼容: overflow: hidden; 下面是不支持低配浏览器,而且似乎该效果对 P 标签 ...
- Jquery遍历之获取子级元素、同级元素和父级元素
Jquery遍历之获取子级元素.同级元素和父级元素 Jquery的遍历,其实就当前位置的元素相对于其他元素的位置的关系进行查找或选取HTML元素.以某项选择开始,并沿着这条线进行移动,或向上(父级). ...
- float 浮动 文档流和文字流区别
关于float属性的脱离文档流的问题 使用float浮动后,元素虽然会脱离文档流,但还处在文本流的位置当中,所以就不会出现重叠的效果吗? 下面我自己试了一下,给两个DIV分别设置了样式,而只给第一个D ...
随机推荐
- Jenkins之Job建立-运行本地脚本
新建一个自由风格的项目,运行本地脚本 1.点击菜单栏中的“新任务” 2.进入该页面后输入一个项目名称,然后选择“构建一个自由风格的软件项目”,滑动到最底端,点击ok(在左下角) 3.进入下图页面后 “ ...
- threejs学习笔记(一)
得到webgl的渲染管线
- python之面相对象进阶
一 isinstance(obj,cls)和issubclass(sub,super) isinstance(obj,cls)检查是否obj是否是类 cls 的对象 class Foo(object) ...
- ESP8266当中继
WiFi推原理(转) http://jb.tongxinmao.com/Article/Detail/id/412 https://www.anywlan.com/thread-409913-1-1. ...
- OCR技术浅析-自写篇(2)
本例仅以本人浅薄理解,妄想自制文字识别程序,实际在识别部分未有完善. <?php class readChar{ private $imgSize; //图片尺寸 private $imgGd2 ...
- centos6.8 配置mysql赋予mysql远程连接权限
1.关掉防火墙 2.检查3306端口是否开放 3.修改用户用户权限 GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '您的数据库密码' ...
- 访问docker仓库
仓库(Repositiry)是集中存放镜像的地方,分为公共仓库和私有仓库.一个容易与之混淆的概念是注册服务器(Registry).实际上注册服务器是存放仓库的具体服务器,一个注册服务器上可以有多个仓库 ...
- Djangon的坑
<a href="/del_student/?pk={{ students.pk }}"></a> 在django中当你写入这样的语句是,pk={{ stu ...
- koa-router 后台路由管理框架
koa-router是koa框架配套的路由管理模块,对后台的接口分离出来. 首先引入koa和koa-router, 然后分批设置路由: 代码中的institution.modifyInsStatus是 ...
- 支付宝支付demo(亲测)
支付宝支付demo 这个是java后台调起支付的demo,直接将body返回给安卓端即可调起支付 package com.dyy.test; import java.text.SimpleDateFo ...