文章:子div撑不开父div的几种解决办法:

1,可以在所有子元素后增加<div style="clear:both;"></div>

2,给父容器增加样式:

.clearfix:after {

content: ".";

display: block;

height: 0;

clear: both;

visibility: hidden;

}

兼容IE样式:

/* Hides from IE-mac \*/

* html .clearfix {height: 1%;}

/* End hide from IE-mac */

3,父容器增加样式:overflow:hidden

感觉第三种方法最为简单。

html布局-子div浮动后,父容器撑不开解决的更多相关文章

  1. 【html】【8】div布局[子div在父div居底]

    从今天起 开始细话div布局   思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...

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

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

  3. 解决 css 浮动后 父元素高度失效问题

    应用场景 子元素标签使用 浮动后,会出现浮在父元素上层,脱离了.导致父元素没办法根据子元素的高度而变化,提供以下解决方案. 解决代码 把 '.clearfix ' Class 样式添加到 父元素即可. ...

  4. Position a child div relative to parent container in CSS: [设置 子DIV位置 跟 父DIV相关联]

    最近调DIV的位置比较头疼,各种position: relative / absolute google到一篇好文章[http://www.webdevdoor.com/html-css/css-po ...

  5. css 父div如何包裹带有float属性的子div,float子div如何撑开父div

    来自网络摘抄 原始代码 <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...

  6. 解决子元素用css float浮动后父级元素高度自适应高度

    1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...

  7. css 解决父div与子div不在同一容器的问题

    <html> <head> </head> <body> <div style="margin:0 auto;width:600px;b ...

  8. div clear清除浮动产生的影响 被受影响的div加上清除浮动后 不会填充前一个div浮动后空出的位置

  9. html同行两个div浮动后下一个div怎么换行的问题

    传送门:https://blog.csdn.net/asdfg6541/article/details/78514535

随机推荐

  1. springboot:redis反序列化发生类型转换错误

    明明是同一个类,在反序列时报类型转换错误,真实奇怪.经查找资料,说是引入了devtools的缘故. 注释掉以下内容: <dependency> <groupId>org.spr ...

  2. [LeetCode] 246. Strobogrammatic Number 对称数

    A strobogrammatic number is a number that looks the same when rotated 180 degrees (looked at upside ...

  3. [LeetCode] 875. Koko Eating Bananas 可可吃香蕉

    Koko loves to eat bananas.  There are N piles of bananas, the i-th pile has piles[i] bananas.  The g ...

  4. E: Unable to correct problems, you have held broken packages-之apt-get 下载报依赖问题

    今天在新来了一台ubutnu 18.04 在安装zabbix客户端是报依赖问题 root@VM_0_10:~# apt-get install zabbix-agent Reading package ...

  5. VS2010 C#添加水晶报表及设计

    添加并设计水晶报表. [1]在VS中添加水晶报表 右击项目-->添加-->组件-->Crystal Report,输入文件名称“CrystallistReport”,如下图所示: 此 ...

  6. javascript添加到收藏夹写法

    javascript添加到收藏夹写法 <pre>function addFavorite2() { var url = window.location; var title = docum ...

  7. windows10 ubuntu子系统运行docker出现的问题

    前一篇笔记记录了安装的过程及错误处理办法,但是在正式使用docker时,却又出现新的问题: “docker: Cannot connect to the Docker daemon at unix:/ ...

  8. cetos7 Mysql5.7安装

    centos7 MySQL安装 一.检查是否已经存在mysql,若存在卸载,避免安装时产生一些错误 rpm -qa | grep -i mysql 若存在,使用rpm -e packname –nod ...

  9. 一分钟 - 创建python虚拟环境

    python创建虚拟环境 python安装第三方库大都是通过pip命令安装,这个命令确实是很简便的,而对于每个独立的项目来说,需要用到的库或许会不同,如果删除或更新原来已有的版本库,或许会导致其他的项 ...

  10. 20191213-RF中报告打不开提示Opening Robot Framework report failed

    配置好Jenkins的RF框架后跑了一次autotest发现哦豁report打不开,网上找了一堆方法都是只能临时解决,重启后又失效了.现在给出临时解决方案和永久解决方案 首先错误信息如下:  临时解决 ...