文章:子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. pytorch中调用C进行扩展

    pytorch中调用C进行扩展,使得某些功能在CPU上运行更快: 第一步:编写头文件 /* src/my_lib.h */ int my_lib_add_forward(THFloatTensor * ...

  2. NazoHell 攻略

    http://hell.one-story.cn/hell-start.html Level 0: http://nazohell.one-story.cn/nazohell-start.html 跳 ...

  3. [LeetCode] 204. Count Primes 计数质数

    Description: Count the number of prime numbers less than a non-negative number, n click to show more ...

  4. soapUI使用-调用post方法

    前言 soapUI的安装请查看此链接:https://www.cnblogs.com/linxiu-0925/p/10138771.html 使用步骤 1打开soapUI 2新建一个项目:New SO ...

  5. 【Python学习之五】函数

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 python3.6 Python不但能非常灵活地定义函数,而且本身内置 ...

  6. Kubernetes Pod应用的滚动更新(八)

    一.环境准备 我们紧接上一节的环境,进行下面的操作,如果不清楚的,可以先查看上一篇博文. 滚动更新是一次只更新一小部分副本,成功后,再更新更多的副本,最终完成所有副本的更新.滚动更新的最大的好处是零停 ...

  7. VS Code 编译C++

    1.安装VS Code 2.安装插件 在左侧插件库 必须: c/c++ 插件 非必需: C++ Intellisense Include Autocomplete 3.安装编译调试环境mingw Mi ...

  8. 完全卸载MySQL服务

    1.控制面板——>所有控制面板项——>程序和功能,卸载mysql server! 2.删除MySQL文件,尤其是ProgramData里面的隐藏文件MySQL,我当时没有删除,重新安装My ...

  9. 【IDEA使用技巧】(1) —— 快捷键

    1.InteliJ IDEA设置快捷键 1.1. IDEA快捷键修改—代码提示 IDEA中当现有的快捷键被系统中其他软件(比如输入法)占用时,我们可以自定义修改快捷键.比如,IDEA中的代码自动提示快 ...

  10. 中国大学MOOC-翁恺-C语言程序设计习题集(二)

    04-0. 求符合给定条件的整数集(15)给定不超过6的正整数A,考虑从A开始的连续4个数字.请输出所有由它们组成的无重复数字的3位数. 输入格式: 输入在一行中给出A. 输出格式: 输出满足条件的的 ...