浮动元素怎么撑开父元素

   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;

}
请问一下父元素内部的3个DIV元素我设置了左浮动。怎么在不设置父元素宽度的情况下让内部的DIV横向排列啊。我要做轮播图。默认的是纵向排列的也就是我设置了左浮动3个DIV盒子会乡下排列1500px

javascript html css

阅读 7.3k

7 个回答

得票最新

兔子饿了

1.3k1311

发布于
2018-01-16

我个人不喜欢浮动，先推荐一下inline-block

<!DOCTYPE html>
<html>

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

<style>
    .two {
        /* 禁止内联元素换行 */
        white-space: nowrap;
        /* 隐藏超出部分 */
        overflow: hidden;
    }

    .img {
        /* 设置为内联块 */
        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><!--
            内联元素之间的空格不会被忽略
            所以采用比较特殊的换行方法
        --><div class="img img2"></div
        ><div class="img img3"></div>
    </div>
</body>

</html>

然后是浮动的，首先要明白，元素浮动之后就脱离了文档流，不能再影响父级，所以不但不能撑开宽度，高度也不能撑开，需要用overflow: hidden;, clear: both之类的方式才能防止浮动塌陷，所以只能靠直接设置父级来决定父级宽度。
如果没有设置父级宽度，浮动的元素不但不会撑开父级，还会因为父级宽度不足向下跑，就出现你题目里向下排列的情况了。

<!DOCTYPE html>
<html>

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

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

    .wrap {
        /* 实际内容宽度 */
        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>

莲_涳栢__

6871820

发布于
2018-01-16

更新于
2018-01-16

.two::after {
  content: "";
  display: block;
  clear: both;
}

灯下黑

发布于
2018-01-16

新手上路，请多包涵

对父元素div设置css属性： overflow:hidden;

shirley

81874769

发布于
2018-01-16

别用浮动啦，用flex吧

milk

736

发布于
2018-01-16

最外面再加一层，设置固定宽度，overflow：hidden；.two设置超长的宽度就可以了吧

公茂鑫

513

发布于
2018-01-16

新手上路，请多包涵

题主是说子元素设置了浮动之后还是向下排列吗，那应该是视窗宽度不够，把子元素的宽高写小一点看看。其次，浮动之后元素脱离文档流，不主动设置宽高的话在子元素浮动之后div.two宽高都是零，如果想让子元素在浮动之后依旧能自动撑开父元素，应该清除浮动。清除浮动的方法有很多种，我不太喜欢overflow: hidden，我个人喜欢给父级加伪类。

<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>