文章:子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. [LeetCode] 92. Reverse Linked List II 反向链表II

    Reverse a linked list from position m to n. Do it in-place and in one-pass. For example:Given 1-> ...

  2. 11 Sping框架--AOP的相关概念及其应用

    1.AOP的概念 AOP(Aspect Oriented Programming 面向切面编程),通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一 ...

  3. [转帖]Linux教程(12)- linux输入输出重定向

    Linux教程(12)- linux输入输出重定向 2018-08-21 22:57:02 钱婷婷 阅读数 49更多 分类专栏: Linux教程与操作 Linux教程与使用   版权声明:本文为博主原 ...

  4. JavaWeb实现增删查改(图书信息管理)之删除功能实现

    —————————————————————————————————————————————————————————— 删除按钮对应的servlet -->DeleteBooks.java  ↓ ...

  5. SPI通讯(Serial Peripheral interface)

    1. SPI,是一种高速的,全双工,同步的通信总线,并且在芯片的管脚上只占用四根线:SCLK,MISO,MOSI,CS 2. SPI结构简图: 可以看出,SPI主从设备两端都有一个位移寄存器,数据在位 ...

  6. DSP未来五大发展趋势

    在4G无线通信领域,数据吞吐量已经达到了3G时代的100到1000倍;在多媒体处理器领域,每天都有新的标准涌现出来;在更多其它DSP应用领域,密集的数据处理器需求不断给处理器设计团队带来新的挑战.随着 ...

  7. ORACLE链接SQLSERVER数据库数据操作函数范例

    ORACLE链接SQLSERVER数据库数据操作函数范例 create or replace function FUN_NAME(LS_DJBH IN varchar2 ,LS_ITM varchar ...

  8. android使用http3

    http3的github地址: https://github.com/cloudflare/quiche

  9. 湖南师范大学计算机基础课网络教学平台 版本 V2.0(2017.9.18)

    湖南师范大学计算机基础课网络教学平台 版本 V2.0(2017.9.18) 开发环境: 开发工具:VS2013,数据库:Sqlserver2012 开发语言:Asp.net MVC5 ,界面UI:jq ...

  10. 使用springboot实现一个简单的restful crud——03、前端页面、管理员登陆(注销)功能

    前言 这一篇我们就先引入前端页面和相关的静态资源,再做一下管理员的登陆和注销的功能,为后续在页面上操作数据做一个基础. 前端页面 前端的页面是我从网上找的一个基于Bootstrap 的dashboar ...