解决办法：清除浮动：clear:both;
给父元素高度：height(不是很可取)
给父元素：display：inline-black；（问题：margin：auto失效）
给父元素：overflow:hidden;( 在IE67需要有宽度);
给父元素添加伪类;:after{content：""; display:block；clear：both;} (万能)
时间： 2024-12-23 21:34:06
float浮动问题：会造成父级元素高度坍塌；
float浮动问题：会造成父级元素高度坍塌；的相关文章
CSS 父级元素高度为 0 解决方案
CSS 中父级元素的高度一般由子元素撑开,不会特意设置高度,但是以下情况会造成父级元素高度坍塌,也就是高度为零,影响后面元素的排版. 子元素使用绝对定位 子元素浮动 针对第一种情况,即子元素使用绝对定位,可以使用以下方案: 子元素的绝对定位改为相对定位,如果可以改的话 针对第二种情况,即由子元素浮动造成父元素坍塌,可以使用以下方案: /*父级元素绝对定位*/ position: absolute /*父级元素添加*/ overflow: hidden; /*伪元素清除浮动造成的影响*/ .cle
float浮动后，父级元素高度塌陷和遮盖问题
当子元素不浮动的时候,父元素的高度是由子元素撑起来的. 子元素A和B是两个div,独占一行 效果如图: 当子元素B浮动起来之后,父元素高度塌陷到只剩子元素A的高度 效果如图: 当给子元素A(div)设置CSS属性:display:inline 后,A的宽高将不起作用,宽高由内容撑开,即被字母A撑开.此时父级元素高度没有塌陷到和A一样,而是和B的高度一样 效果如图: 当子元素A和B同时浮动起来之后,A的CSS属性:display:inline失效,效果为float的效果,同时父级元素的高度彻底塌陷
解决父级元素高度塌陷问题的方法
如果父元素只包含浮动元素,且父元素未设置高度和宽度的时候.那么它的高度就会塌缩为零,也就是所谓的“高度塌陷”,如果父级元素包含背景或者边框,那么溢出的元素就不像父级元素的一部分了.解决“高度塌陷”的问题很简单: 1.浮动父级元素 如果让父级元素浮动,父级元素的高度就会扩大,直到完全包含它里面的浮动元素,虽然这个方法很奇怪,但是很有效.如果选择这种方法,一定要在该元素的下个元素添加clear:both,确保浮动元素落到父级元素的下方. 2.利用overflow:hidden,zoom:1 { ov
关于多子级元素充满父级元素高度的布局方式
关于多子级元素充满父级元素高度的布局方式,听着有些绕口,上个图应该就能很清楚的理解这标题的意思了: 如图:左右分栏的情况下,有顶部和底部导航,且在屏幕高度不定的时候(移动端,多设备适配),如何不适用js来让内容区自适应扩展,填满父级剩下的高度呢? 首先分两种情况: 一.顶部和底部导航为固定高度时,这种情况挺常见的,也是相对比较简单的一种情况: 方法1:使用box-sizing: border-box; 配合 height: 100%; 和上下padding来达到全屏侧边的效果: <!DOCTYP
CSS清除浮动使父级元素展开的三个方法
点评:一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开,下面举个例子为大家详细介绍下,希望对大家有所帮助 一个没有设置高度的容器div内如果存在浮动元素(即使用了属性float:left或者float:right),那么该父级元素会无法展开. 举个例子,有一个div容器,div容器里有两个小容器,分别向左和向右浮动,为了区别这三个容器,分别设置了不同颜色的边框. 复制代码 代码如下: <html> <h
float导致父级元素塌陷的问题
利用float进行页面布局时常常会出现父级元素没有高度的塌陷问题,如以下代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <style> .father-div{ background-color: #000000; /*overflow:
jquery选择器如何获取父级元素、同级元素、子元素
一.新建页面 1 <ul> 2 <li>list item 1</li> 3 <li>list item 2</li> 4 <li class="third-item">list item 3</li> 5 <li>list item 4</li> 6 <li>list item 5</li> 7 </ul> 8 9 <p>Hell
[ jquery 过滤器 offsetParent() ] 此方法用于在选择器的基础之上搜索被选元素有定位的父级元素,仅对可见元素有效
此方法用于在选择器的基础之上搜索被选元素有定位的父级元素,仅对可见元素有效: 返回第一个匹配元素用于定位的父节点,这返回父元素中第一个其position设为relative或者absolute的元素,此方法仅对可见元素有效 实例: <html lang='zh-cn'> <head> <title>Insert you title</title> <meta http-equiv='description' content='this is my pa
转：iframe加载的子页面里面获取父级元素窗口以及元素的高度
iframe里的js要操作父级窗口的dom,必须搞懂几个对象: parent是父窗口(如果窗口是顶级窗口,那么parent==self==top) top是最顶级父窗口(有的窗口中套了好几层frameset或者iframe) self是当前窗口(等价window) 父级页面:index.html <!doctype html> <html> <head> <meta charset="utf-8"> <title>父窗口<