方法一:推荐

  设置父div的overflow:hidden;

方法二:
  父div结束前增加一个空div style=”clear:both;”

 .clear {
clear:both;
} <div>
<div style=”float:left;”>
<div class=” clear” />
</div>

方法三:由方法二变换: 

 .clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

方法四:设定高度

子div撑不开父div的更多相关文章

  1. 子div撑不开父div的几种解决办法:

    如何修正DIV float之后导致的外部容器不能撑开的问题   在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样 ...

  2. 子DIV设置margin-top影响父DIV位置的解决办法

    父div如果没有任何东西,子div设置margin-top,父div会下落 <!DOCTYPE html> <html lang="en"> <hea ...

  3. 利用css如何让嵌套的div层不继承父div层的透明度?

    http://zhidao.baidu.com/link?url=cvQhh0Q7_ah0qg9tc-2zP0cjB_PoIiIq6t6RFpp4aZPPNoVJUqyy7TT41TU5pWzRtRY ...

  4. 子div设置margin-top使得父div也跟着向下移动

    之前在写网页的时候,发现一个小问题,就是子div设置margin-top的时候,父的div也会跟着向下移动.我用代码和图描述一下问题: <span style="font-size:1 ...

  5. CSS: 解决Div float后,父Div无法高度自适应的问题

    在用CSS+DIV的布局中,常常会发现,当一个DIV float之后,假设他的高度超过了其父DIV的高度时,其父DIV的高度并不会对应的进行调整.要解决问题(也叫做闭合(清除)浮动),我们有四种办法: ...

  6. echart 设计宽度为百分比时,div撑不开

    解决思路:将百分比换算成px 一句话搞定 ("#chart").css( 'width', $("#chart").width() );$("#cha ...

  7. JavaScript中,让一个div在固定的父div中任意拖动

    1.css代码 #big { border: 1px solid #FF3300; width: 300px; height: 300px; position: relative; } #small ...

  8. html布局-子div浮动后,父容器撑不开解决

    文章:子div撑不开父div的几种解决办法: 1,可以在所有子元素后增加<div style="clear:both;"></div> 2,给父容器增加样式 ...

  9. 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 ...

随机推荐

  1. Jvm的体系结构

    1.垃圾回收器 垃圾回收器(又称为gc):是负责回收内存中无用的对象(好像地球人都知道),就是这些对象没有任何引用了,它就会被视为:垃圾,也就被干掉了. 2.类装载子系统 一听名字,大家就知道,肯定是 ...

  2. 2018-2019-1 20165205 ch02 课下作业

    ch02 课下作业 2.96 代码 #include <stdio.h> #include <stdlib.h> typedef unsigned float_bits; fl ...

  3. uva-10382-贪心

    题意:对于长为L,宽为W的矩形草地,需要对它进行浇水,总共有n个水龙头,给每个水龙头的浇水半径,和位置.求覆盖整个草地需要的最小水龙头数量. 如图,把浇水的面积转换成矩形,然后就和区间覆盖一样了,直接 ...

  4. 在HTML中显示base64 img 图片

    base64的图片可以直接显示在网页上面 <img src=“data:image/png;base64,******************************************** ...

  5. Android TextView 跑马灯效果 - 2018年6月19日

    第一步在布局中添加加粗部分代码: <TextView android:id="@+id/tv_company" android:layout_width="0dp& ...

  6. 【转】shell脚本执行时报"bad interpreter: Text file busy"的解决方法

    1)问题现象: 在ubuntu下执行以下脚本( while_count),报错: -bash: ./while_count: /bin/bash: bad interpreter: Text file ...

  7. rpm包安装的nginx热升级

    文章目录一.本地环境基本介绍二.yum升级命令说明三.升级好nginx后如何不中断业务切换3.1.nginx相关的信号说明3.2.在线热升级nginx可执行文件程序一.本地环境基本介绍本次测试环境,是 ...

  8. AR涂涂乐

    <1> 涂涂乐着色 https://blog.csdn.net/begonia__z/article/details/51282932 http://www.manew.com/blog- ...

  9. tesseract编译错误:fatal error: allheaders.h: No such file or directory

    错误描述: globaloc.cpp::: fatal error: allheaders.h: No such file or directory #include "allheaders ...

  10. ide调试

    F8:  程序向下执行一行(如果当前行有方法调用,这个方法将被执行完毕返回,然后到下一行) F7: 程序向下执行一行.如果该行有自定义方法,则运行进入自定义方法(不会进入官方类库的方法) Alt + ...