文章:子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. Jq如何获取并操作iframe中的元素?

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. Azure上部署Barracuda WAF集群 --- 2

    前面一篇文章讲了如何在Azure上部署Barracuda.这篇文章聊一聊如何配置Barracuda. License 向Barracuda的销售人员申请WAF的License.得到License后打开 ...

  3. Jenkenis报错:该jenkins实例似乎已离线

    使用运行war的形式安装jenkins,因为伟大的墙出现,“该jenkins实例似乎已离线” 问题 解决方法: 1. 保留此离线页面,重新开启一个浏览器tab标签页 2.输入输入网址http://lo ...

  4. QT笔记--事件处理

    1 事件是什么 这里的事件主要是用户输入事件,比如点击一个按钮,选中复选框等.当事件发生的时候,达到我们满意的效果. 2信号与槽 connect(A,XX,B,YY) 当A事件发生的时候,B中的处理函 ...

  5. Jenkins通过完全复制快速创建新项目

  6. 没有索引导致的DIRECT PATH READ

    5月20号下午4-5点,某项目组进行数据入库作业,作业人员反映入库速度很慢.在16:30和16:50分别采集了快照,并根据两个快照得到AWR报告. 直接看TOP 5 EVENTS,这是数据库问题诊断的 ...

  7. java8新特性1--Lambda表达式

    一.Lambda表达式是什么? Lambda表达式有两个特点 一是匿名函数,二是可传递. 匿名函数的应用场景是 通常是在需要一个函数,但是又不想费神去命名一个函数的场合下使用Lambda表达式.lam ...

  8. LeetCode 872. 叶子相似的树(Leaf-Similar Trees)

    872. 叶子相似的树 872. Leaf-Similar Trees 题目描述 请考虑一颗二叉树上所有的叶子,这些叶子的值按从左到右的顺序排列形成一个叶值序列. LeetCode872. Leaf- ...

  9. LeetCode 240. 搜索二维矩阵 II(Search a 2D Matrix II) 37

    240. 搜索二维矩阵 II 240. Search a 2D Matrix II 题目描述 编写一个高效的算法来搜索 m x n 矩阵 matrix 中的一个目标值 target.该矩阵具有以下特性 ...

  10. CSS中position 和float的使用说明(清晰)

    当构建页面排版时,有不同的方法可以使用.使用哪一种方法取决于具体页面的排版要求,在不同的情况下,某些方法可能好过于其他的方法. 比如,可以使用若干个浮动元素来构建一个整洁简洁的页面排版.或者,如果需要 ...