父级盒子无高度,子盒子浮动,高度自适应

利用浮动实现三列布局,中间宽度自适应

    #box{
        border: 1px solid red;
    }
    #left{
        width: 120px;
        height: 300px;
        float:left;
        background-color: grey;
    }
    #main{
        height: 500px;
        margin: 0 220px 0 140px;
        background-color:skyblue;
    }
    #right{
        width: 200px;
        height: 600px;
        float: right;
        background-color: grey;
    }

<div id="box">
    <div id="left"></div>
    <div id="right"></div>
    <div id="main"></div>
</div>

方法一:父级盒子添加一堵墙,用clear:both清除浮动

<div id="box">
    <div id="left"></div>
    <div id="right"></div>
    <div id="main"></div>
    <div class="clear"></div>
</div>

方法二:父级盒子添加overflow:hidden

时间: 2024-12-20 16:36:30

父级盒子无高度,子盒子浮动,高度自适应的相关文章

父级的line-height对加了浮动的子集input不管用

html代码如下: 1 <div class="billtime clearfix"> 3 <span class="fl">原交易订单号:</span> 4 <input class="fl"/> 6 </div> css代码如下: 1 .billtime { 2 line-height: 30px 3 } 4 .fl { 5 float: left 6 } 7 .clearfix {

父级div宽度100%,子级一个div宽度固定,另一个宽度自适应

<!DOCTYPE html> <html> <head> <title>布局测试</title> <style type="text/css"> /*第一种方式*/ .div-box1 { width: 100%; } .div1 { width: 100px; height: 100px; background-color: red; float: left; } .div2 { height: 100px;

&lt;转载&gt;如何解决子级用float浮动父级div高度不能自适应的问题

转载:http://www.kwstu.com/ArticleView/divcss_2013101582430202 解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML

解决子级用css float浮动 而父级div没高度不能自适应高度

解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度 当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍. 1.首先我们先看HTML源代码: <!DOCTYPE html> <html> <head> <meta cha

子元素浮动,父元素高度为0现象解释和原理浅见

有的人在写页子的时候常常会碰见这样的一个问题,就是有一个父级的div下面有子元素,子元素浮动起来后,父元素的高度变成0,撑不起来父级了. 现在先不说解决办法,先说下float属性,float定义:float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.(摘自:w3c). 从定义看出,其实float属性一开始是被应用与图片,来形成文字环绕效果的,任何的元素只要定义了float属

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获取iframe和父级之间元素,方法、属,获取iframe的高度自适应iframe高度

摘自:http://blog.csdn.net/kongjiea/article/details/38870399 1.在父页面 获取iframe子页面的元素 (在同域的情况下 且在http://下测试,且最好在iframe onload加载完毕后 dosomething...) js写法 a.同过contentWindow获取 也有用contentDocument 获取的 但是contentWindow 兼容各个浏览器,可取得子窗口的 window 对象.contentDocument Fir

ifarme获取父级元素

js写法 a.同过contentWindow获取 也有用contentDocument 获取的 但是contentWindow 兼容各个浏览器,可取得子窗口的 window 对象.contentDocument Firefox 支持,> ie8 的ie支持.可取得子窗口的 document 对象. 获取方法 [html] view plaincopyprint? var frameWin=document.getElementById('iframe').contentWindow;    //

width:100%与绝对定位同时存在,偏移出父级容器

当父级容器内的子元素width设为100%,而子元素又有绝对定位时,子元素伸展超出父级容器,像下面 出现这种情况的原因,width:100%,这个百分之百是相对其定位父级而言的,其定位父级有多宽,这个子元素就有多宽,所以子元素跑到了父级容器外 html <div class="container"> <div class="content">好的</div> </div> css .container { positi