float不会撑开父元素的高度,有什么解决方法

2024-11-09

使用float属性布局时父元素高度不能自适应的解决方法

在网页的布局过程中,经常会用到float属性来实现页面的左右布局,但是有个问题就是父元素的高度并不能根据子元素的高度自适应.比如下面这段代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>title</title> </head> <body> <div align="center&q

子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题

方法一: html: <div id="all1"> <div id="left1">1</div> <div id="left2">1</div> <div style=" clear:both; "></div> </div> css: #left1{ float:left;width:200px;} #left2{ float

float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是要求固定的宽度,宽度计算错误就会带来整个布局的错乱. float属性出现的初衷是为了让文字环绕图片实现图文混排的效果和应用于流体布局,所以float浮动带来的父元素高度没有的问题并不是我们说的是一个 BUG,这本身就是float的特性. 以下是解决float浮动带来的父元素高度没有的问题测试为I

子Div使用Float后如何撑开父Div

如果想要撑开父元素可以采用以下方法: 方法一: 父元素设置overflow以及zoom,样式如下: 1 <style> 2 #div1{border:1px solid red;overflow:hidden;zoom:1;} 3 #div2,#div3{float:right;border:1px solid blue;} 4 </style> 方法二: 父元素也是设置浮动效果,样式如下: 1 <style> 2 #div1{border:1px soli

【css】子元素浮动到了父元素外，父元素没有随子元素自适应高度，如何解决？

正常情况如果子元素没有设置浮动(float),父元素的高度会随着子元素高度的改变而改变的. 设置浮动以后父元素的高度不会随着子元素的高度而变化. 例如:在一个ul中定义若干个li,并设置float='left' <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte

子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素

纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial

css之高度塌陷及其解决方法

浅谈清除浮动的多种方式(clearfix) 1.什么是浮动 ? 是否脱离文档流? 1.普通流定位 static(默认方式) 普通流定位,又称为文档流定位,是页面元素的默认定位方式页面中的块级元素:按照从上到下的方式逐个排列页面中的行内元素:按照从左到右的方式逐个排列但是如何让多个块级元素在一行内显示? 这里就引出了浮动定位 2.浮动定位 float float属性取值为 left/right 脱离文档流 3.相对定位 relative 元素会相对于它原来的位置偏移某个距离,改变元素位

inline-block元素间隙问题原因及解决方法

inline-block元素间隙问题原因及解决方法原因: 书写时由空格.换行或回车所产生空白符所致解决方法: 方法1:font-size:0 方法2:改变书写方式方法3:使用margin负值方法4:display:block;floet:left 方法5:父元素letter-space:负值方法6:代码压缩去空白

子级用了float浮动之后,如何撑开父元素,让父元素div自动适应高度

方法一:对父级设置固定高度假如以上案例,我们知道内部div高度100px,那对父级设置css height为100px看看效果. 此方法缺点,父级是固定高度,而不随内容高度自适应高度,没高度.此方法针对能确定父div内的内容高度情况下使用. 方法二:使用css clear清除浮动在父级div标签闭合</div>前加一个clear清除浮动对象. 此方法需要注意是clear:both加的位置,不是对父级直接加clear样式,而是在父级</div>前加带clear对象盒子. 方法三:

float元素的父元素自适应高度

当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种. 1.对父元素设置固定高度 2.使用clear清除浮动 3.对父元素加overflow样式

css中子元素浮动，无法自动撑开父元素的解决办法

<div> <div style="float:left;">left</div> <div style="float:right;">right</div> </div> 如上代码所示,父div的高度并不会随着两个子div的增高而增高.解决办法: 给父div加一个 overflow:hidden 属性即可.如下: <div style="overflow:hidden;&quo

css之子元素获取(未定义高度)父元素的高度

你可能碰到过这样的需求,一个高度不固定的区域(内容由用户创造),当鼠标经过该区域或者其神马操作时,需要出现一个与该区域一样大的模版: 我们用一个span来处理这个mask.由于 .sample-1 和 .sample-2 的高度是不确定的,也就是说我们没有对它们定义 height.如果父元素没有定义高度,子元素仍然可以通过 height:100% 的方式来得到父元素的实际高度. 除了IE6,几乎所有的主流浏览器都支持子元素获取父元素(未定义高度)的高度: 对于这个用户创造内容的区域,高度会在一个

IE浏览器中overflow:hidden无效，内层元素超出外层div的解决方法

原文地址:http://www.xin126.cn/show.asp?id=2624 在用css布局的时候,用IE浏览器(ie6.ie7.ie8)预览,有时候会出现内层元素(内部DIV.图片等)超出外层div的现象,中国网页设计站长找到解决方法,希望对遇到类似问题的设计师有所帮助: 页面布局错乱产生原因: 当父元素的内部元素(直接子元素或者下级子元素)的样式拥有position:relative属性时,父元素的overflow:hidden属性会失效,出现子元素会超出父元素设定的高度的情况. 解

父元素设置固定宽度并设置overflow:scroll，如何让子元素撑开父元素

<div class="a"> <div class="b"> <div class="c">内容内容,很长的内容</div> </div></div> 给a设定一个固定宽度,并设定overflow:scroll,使其出现横向滚动条,但文字内容会自动换行,为了不换行,我给c设定white-space:nowrap,虽然达到了效果,可以完整显示内容,并出现滚动条,但实际上a和b

css中input与button在一行高度不一致的解决方法

在写html表单的时候,发现了一个问题:input和button设置了一样的宽高,但是显示高度确不一致,先看代码: <style> input,button{ width:100px; height: 60px; } </style> <input type="text" value="测试"/> <input type="button" value="按钮"/> <but

inline-block元素出现位置错位的解决方法

如下代码所示: <div class="container"> <div style="display: inline-block; height: 100px; width: 100px;"><img src="/myImg.jpg"></div> <div style="display: inline-block; height: 100px; width: 100px;&quo

fullpage中高度错误的解决方法

今天我再用fullpage写全屏页面的时候,发现在ie中,一整屏的页面总是不能铺满,高度总是少一截儿,各种搜索,找到了个合适的方法,这里记录下,也希望给之后遇到这个问题的人提供一种方式,当然不一定能解决所有. 方法只需要在css中加上一句代码 html { overflow-x: hidden; overflow-y: auto;}

ligerUI 关闭父弹窗JS报错问题解决方法

1:调用父窗口某一个文件框,获取焦点, parent.window.document.getElementById("roleName").focus(); 2:关闭父窗口parent.$.ligerDialog.close(); //关闭弹出窗利用这种方法关闭窗口存在一个问题 parent.$.ligerDialog.open．弹窗后后,遮罩层有显示．, 用以下方法关闭窗口． parent.$.ligerDialog.close(); parent.$(".l-dialo

bootstrap栅格系统中同行div高度不一致的解决方法

通过div底部的margin和padding实现,缺点:下边框无法完整显示,建议在无边框情况下使用 .row{ overflow: hidden; } [class*="col-"]{ margin-bottom: -99999px; padding-bottom: 99999px; }

解决图片把父元素向下撑大大约3px问题

现象 bug: 图片在div\li\dt 等图片把父元素向下撑大大约3px <style> img { width: 30%; //这里由于图片过大,等比缩放30% } div { background-color: red; } </style> <body> <div> <img src="