关于清除浮动效果的疑问

来源：5-1 清除浮动

小术菜菜

2020-06-10 13:08:23

<div>
    <div id="1"></div>
    <div id="2"></div>
    <div id="3"></div>
</div>

如果1 和 2都是浮动，然后在div3里用 clear both清除浮动之后，此时的div3 就显示在了div1和2的下一行，此时的div3已经变成了文档流，那么也就是说清除浮动之后，文档流会自动紧贴着浮动流的下面？

写回答

3回答

慕丝1539783

2020-06-10

已采纳

#div{
    width: 830px;
    position: absolute;
    outline: dashed gray;
    left: 50%;/*左边距离页面左边缘是页面的一半*/
    margin-left: -415px;/*左外边距是负值，是div宽度的一半*/
}

因为#div这里你设置了absolute绝对定位，而不是relative相对定位。

好帮手慕阿慧

2020-06-10

同学你好，

1、div3清除浮动之后，文档流会自动紧贴着浮动流的下面。

2、上面同学的说法是正确的。position:absolute跟float浮动一样拥有脱离文档流的功能。但是定位会脱离文档流，不占据原来的位置。所以数字会显示在左上角。

如果我的回答解决了你的疑惑，请采纳！祝学习愉快！

小术菜菜

提问者

2020-06-10

HTML：

<body>
    <div id="div">
        <div id="div1">
            <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br>
            <label id="lable">欢迎来到慕课网学习新知识！</label>
        </div>
        <div id="div2">
            <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br>
            <label id="lable">欢迎来到慕课网学习新知识！</label>
        </div>
        <div id="div3">
            <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br>
            <label id="lable">欢迎来到慕课网学习新知识！</label>
        </div>

        <div id="div4">
            <img src="http://climg.mukewang.com/590fe9770001e63102400135.jpg"><br>
            <label id="lable">欢迎来到慕课网学习新知识！</label>
        </div>
        <div id="div5">
            <img src="http://climg.mukewang.com/590fe97d00011bda02400135.jpg"><br>
            <label id="lable">欢迎来到慕课网学习新知识！</label>
        </div>
        <div id="div6">
            <img src="http://climg.mukewang.com/590fe982000150ba02400135.jpg"><br>
            <label id="lable">欢迎来到慕课网学习新知识！</label>
        </div>
    </div>

    <div id="clear"></div>
    <div id="c">
        <div id="div7">777</div>
        <div id="div8">888</div>
        <div id="div9">999</div>
    </div>
</body>

CSS:

#div1,#div2,#div3,#div4,#div5,#div6{
    float: left;
    margin: 15px 15px;
    padding: 3px 3px; 
    outline:grey solid ;
    text-align: center;
}
#div{
    width: 830px;
    position: absolute;
    outline: dashed gray;
    left: 50%;/*左边距离页面左边缘是页面的一半*/
    margin-left: -415px;/*左外边距是负值，是div宽度的一半*/
}
#clear{
    clear: both;
}

运行：

为什么数字显示在左上角呢？？

不应该是显示在图片的下一行吗？？晕了

0 学习 · 16556 问题

查看课程

相似问题

关于清除浮动的理解

回答 3

清除浮动无效

回答 1

关于清除浮动

回答 1

回答 2

关于取消浮动的理解

回答 1

打开慕课网App查看更多内容