文章:子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. 图像处理软件ImageJ

    ImageJ是一个基于java的公共的图像处理软件,它是由National Institutes of Health开发的.可运行于Microsoft Windows,Mac OS,Mac OS X, ...

  2. mysql or条件查询优化

    当使用or的时候是不会用到索引的 explain SELECT * FROM aladdin_resource WHERE state = 1 OR state = 2; 解决办法就是用union替换 ...

  3. 用Vue2.0实现简单的分页及跳转

    用Vue2.0实现简单的分页及跳转 2018年07月26日 20:29:51 Freya_yyy 阅读数 3369    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog ...

  4. redis主从分节

    概述 在现有企业中80%公司大部分使用的是redis单机服务,在实际的场景当中单一节点的redis容易面临风险. 面临问题 机器故障.我们部署到一台 Redis 服务器,当发生机器故障时,需要迁移到另 ...

  5. Maven中解决jar包冲突的三种方式

    首先我们在idea中创建一个maven工程,我们只关注pom.xml以及External Libraries中导入的jar包 导入spring-beans.jar <dependency> ...

  6. 第3/7Beta冲刺

    1.团队成员 成员姓名 成员学号 秦裕航 201731062432(组长) 刘东 201731062227 张旭 201731062129 王伟 201731062214 2.SCRU部分 2.1各成 ...

  7. Springboot采用hibernate-validate验证请求参数

    在springboot项目使用hibernate-validate对请求参数添加注解进行校验 常用注解 @Null,标注的属性值必须为空 @NotNull,标注的属性值不能为空 @AssertTrue ...

  8. [IOT] - Raspbian Buster 设置固定 IP

    背景 Raspberry Pi 4 + Raspbian Buster 配置步骤 1. 打开文件 "/etc/dhcpcd.conf" 进行配置. 2. 有线网卡配置固定IP in ...

  9. 2019/7/18ACM集训

    2019-07-18 09:15:34 这个是练习刷的题 Vus the Cossack and Numbers Vus the Cossack has nn real numbers aiai. I ...

  10. REST Framework接口规范

    REST Framework接口规范 一 .发展及其背景介绍 网络应用程序,分为前端和后端两个部分.当前的发展趋势,就是前端设备层出不穷(手机.平板.桌面电脑.其他专用设备-).因此,必须有一种统一的 ...