鍍金池/ 問答/HTML/ 浮動(dòng)元素怎么撐開父元素

浮動(dòng)元素怎么撐開父元素

   html：  
    <div class="two">
        <div class="img1"></div>
        <div class="img2"></div>
        <div class="img3"></div>
    </div>
    css：

.img1{

width: 500px;
height: 500px;
background: url(a)no-repeat;
background-size: 500px 500px;

}
.img2{

width: 500px;
height: 500px;
background: url(../csstexting/b.JPEG)no-repeat;
background-size: 500px 500px;

}

.img3{

width: 500px;
height: 500px;
background: url(../csstexting/c.JPEG)no-repeat;
background-size: 500px 500px;

}
請問一下父元素內(nèi)部的3個(gè)DIV元素我設(shè)置了左浮動(dòng)。怎么在不設(shè)置父元素寬度的情況下讓內(nèi)部的DIV橫向排列啊。我要做輪播圖。默認(rèn)的是縱向排列的 也就是我設(shè)置了左浮動(dòng)3個(gè)DIV盒子會(huì)鄉(xiāng)下排列1500px

回答
編輯回答
澐染

別用浮動(dòng)啦，用flex吧

2018年9月4日 15:39
編輯回答
朽鹿

加一個(gè)<div style="clear:both"></div>

2017年4月2日 22:34
編輯回答
無標(biāo)題

對父元素div設(shè)置css屬性： overflow:hidden;

2017年1月11日 15:27
編輯回答
夏木

我個(gè)人不喜歡浮動(dòng)，先推薦一下inline-block

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>hello world</title>
</head>

<style>
    .two {
        /* 禁止內(nèi)聯(lián)元素?fù)Q行 */
        white-space: nowrap;
        /* 隱藏超出部分 */
        overflow: hidden;
    }

    .img {
        /* 設(shè)置為內(nèi)聯(lián)塊 */
        display: inline-block;
        width: 500px;
        height: 500px;
        /* 垂直對齊為頂部對齊 */
        vertical-align: top;
        background-size: 500px 500px;
    }

    .img1 {
        background: red url(a)no-repeat;
    }

    .img2 {
        background: green url(../csstexting/b.JPEG) no-repeat;
    }

    .img3 {
        background: blue url(../csstexting/c.JPEG) no-repeat;
    }
</style>

<body>
    <div class="two">
        <div class="img img1"></div><!--
            內(nèi)聯(lián)元素之間的空格不會(huì)被忽略
            所以采用比較特殊的換行方法
        --><div class="img img2"></div
        ><div class="img img3"></div>
    </div>
</body>

</html>

然后是浮動(dòng)的，首先要明白，元素浮動(dòng)之后就脫離了文檔流，不能再影響父級(jí)，所以不但不能撐開寬度，高度也不能撐開，需要用overflow: hidden;, clear: both之類的方式才能防止浮動(dòng)塌陷，所以只能靠直接設(shè)置父級(jí)來決定父級(jí)寬度。
如果沒有設(shè)置父級(jí)寬度，浮動(dòng)的元素不但不會(huì)撐開父級(jí)，還會(huì)因?yàn)楦讣?jí)寬度不足向下跑，就出現(xiàn)你題目里向下排列的情況了。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>hello world</title>
</head>

<style>
    .two {
        /* 限制顯示寬度 */
        width: 100%;
        /* 隱藏超出部分 */
        overflow: hidden;
    }

    .wrap {
        /* 實(shí)際內(nèi)容寬度 */
        width: 1500px;
    }

    .img {
        float: left;
        width: 500px;
        height: 500px;
        background-size: 500px 500px;
    }

    .img1 {
        background: red url(a)no-repeat;
    }

    .img2 {
        background: green url(../csstexting/b.JPEG) no-repeat;
    }

    .img3 {
        background: blue url(../csstexting/c.JPEG) no-repeat;
    }
</style>

<body>
    <div class="two">
        <div class="wrap">
            <div class="img img1"></div>
            <div class="img img2"></div>
            <div class="img img3"></div>
        </div>
    </div>
</body>

</html>
2017年6月19日 20:16
編輯回答
礙你眼

最外面再加一層，設(shè)置固定寬度，overflow：hidden；.two設(shè)置超長的寬度就可以了吧

2017年10月24日 14:47
編輯回答
孤慣

題主是說子元素設(shè)置了浮動(dòng)之后還是向下排列嗎，那應(yīng)該是視窗寬度不夠，把子元素的寬高寫小一點(diǎn)看看。其次，浮動(dòng)之后元素脫離文檔流，不主動(dòng)設(shè)置寬高的話在子元素浮動(dòng)之后div.two寬高都是零，如果想讓子元素在浮動(dòng)之后依舊能自動(dòng)撐開父元素，應(yīng)該清除浮動(dòng)。清除浮動(dòng)的方法有很多種，我不太喜歡overflow: hidden，我個(gè)人喜歡給父級(jí)加偽類。

<style>
    .clear:after {
        display: block;
        content: '';
        clear: both;
    }
</style>

<div class="two clear">
    <div class="img1"></div>
    <div class="img2"></div>
    <div class="img3"></div>
</div>
2017年7月17日 21:51
編輯回答
九年囚
.two::after {
  content: "";
  display: block;
  clear: both;
}
2017年4月15日 13:24