子级用了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 ...
随机推荐
- ERROR in static/js/0.5d7325513eec31f1e291.js from UglifyJs
今天把vue项目打包是遇到这个问题.这是在服务器上打包时报的错误,本地打包不报错!很头疼!上网查了很多,发现有很多人和我遇到类似的问题,但是都没有解决我的问题!后来灵机一动,解决问题,这就跟大家说一下 ...
- Java并发-AQS及各种Lock锁的原理
原文 : https://blog.csdn.net/zhangdong2012/article/details/79983404
- Qt License 解读
对于桌面和移动平台应用 官方说明如下 Qt for Application Development lets you create applications for desktop and mobil ...
- React-代码规范
1.方法绑定this,统一写在consrtructor()里. constructor(props){ ... this.handleInputChange=this.handleInputChang ...
- iOS开发基础-图片切换(1)
一.程序功能分析 1)点击左右箭头切换图片.序号.描述: 2)如果是首张图片,左边箭头失效: 3)如果是最后一张图片,右边箭头失效. 二.程序实现 定义确定图片位置.大小的常量: //ViewCont ...
- echarts报表显示%+没有0
function showTablegroup(page) { var series; $.ajax({ type:'post', url:"<%=basePath%>flowA ...
- vue中使用Base64和md5和rsa
https://blog.csdn.net/benben513624/article/details/88113459(copy) https://www.cnblogs.com/myfate/p/1 ...
- k8s简单的来部署一下tomcat,并测试自愈功能
前言: 2018年12月6日 今天终于把k8s运行tomcat打通了,耗了我几天时间一个一个坑踩过来,不容易啊,废话不多说. 先记录一些操作时的错误: <<<<<< ...
- spark-MLlib之线性回归
>>提君博客原创 http://www.cnblogs.com/tijun/ << 假定线性拟合方程: 提君博客原创 变量 Xi 是 i 个变量或者说属性 参数 ai 是 ...
- 转 - Linux安装python3.6
https://www.cnblogs.com/kimyeee/p/7250560.html