文章:子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. [简短问答]lodop打印过慢或有进度条

    问法1:打印预览显示进度条,过慢出现进度条,打印过慢,可能和很多原因有关:打印内容或样式或图片等过多,有需要下载有脚步执行或本身网络慢:机器性能过低 系统ie有问题或缓存过多:或使用的是共享打印机.如 ...

  2. Kubernetes 基于 RBAC 的授权(十六)

    目录 一.RBAC介绍 1.1.角色和集群角色 1.2.RoleBinding 和 ClusterRoleBinding 1.3.资源 1.4.主体 二.命令行工具 2.1.kubectl creat ...

  3. 玩转CONSUL(3)–大规模部署的性能开销定量分析

    1. 引言 今天有朋友问萌叔,consul能否在大规模生产环境下进行应用.场景是总计大约10w+台机器,分为3 ~ 4个机房,单个机房最多3w万+机器.这个问题大的,可把萌叔吓了跳,部门里面consu ...

  4. Oracle Spatial分区应用研究之二:按县分区与按省分区对比测试报告

    1.实验目的 在上一轮的实验中,oracle 11g r2版本下,在87县市实验数据的基础上,比较了分表与分区的效率,得出了分区+全局索引效率较高的结论(见上一篇博客).不过我们尚未比较过不同的分区粒 ...

  5. AOP+Token防止表单重复提交

    表单重复提交: 由于用户误操作,多次点击表单提交按钮 由于网速等原因造成页面卡顿,用户重复刷新提交页面 避免表单重复提交的方式: 1.页面上的按钮做防重复点击操作 2.在数据库中可以做唯一约束 3.利 ...

  6. 卸载桌面产品,弹出错误框The Windows Installer service could not be accessed

    卸载程序报这个错误: https://helpdeskgeek.com/how-to/how-to-fix-the-windows-installer-service-could-not-be-acc ...

  7. Mysql中MVCC的使用及原理详解

      准备 测试环境:Mysql 5.7.20-log 数据库默认隔离级别:RR(Repeatable Read,可重复读),MVCC主要适用于Mysql的RC,RR隔离级别 创建一张存储引擎为test ...

  8. Charles手机代理设置

      Charles工具 手机 方法/步骤     1.打开Charles   点击Proxy,选择proxy settings,输入端口8888   打开电脑,在cmd中输入ipconfig,查看本地 ...

  9. 宁夏网络赛-F-Moving On

    https://www.cnblogs.com/31415926535x/p/11440395.html 一道简单的Floyd题,,但是是动态加点求多次有限制的最短路,,感觉这个思想很好,,当然可以直 ...

  10. Sublime Text3安装LESS

    Sublime Text3安装LESS 1.Sublime Text3利用Package Control安装LESS插件.LESS2CSS插件 2.去node官网下载node.js http://no ...