CSS样式之clear清除浮动

最新推荐文章于 2023-05-10 18:16:26 发布

ycy白米饭

最新推荐文章于 2023-05-10 18:16:26 发布

阅读量985

点赞数

分类专栏： web前端文章标签： css html 浮动 clear

本文链接：https://blog.csdn.net/qq812858143/article/details/50760025

版权

web前端专栏收录该内容

14 篇文章 2 订阅

订阅专栏

HTML元素的浮动以及清除浮动，对很多人来说都是感觉非常恶心的，所以今天就研究了下。研究透了，也就那样了。
如果不理解的话，做页面布局的时候，经常会遇到页面被撑不起来的现象，所以浮动这个知识点还是蛮重要的。
1.原始元素如下,外层div：container，内层：a左浮动，b右浮动

<body>
    <div class="container" style="border:1px solid green;">
        <div class="a" style="width:100px; height:100px; border:1px solid red; float:left;">这是一个长很长的页面</div>
        <div class="b" style="width:100px;height:200px; border:1px solid blue; float:right;">块元素</div>
    </div>
</body>

效果图：

分析：a元素左浮动，b元素右浮动，绿色边框的container元素高度没有被撑起来，成为一条横线，因为浮动的元素不被看作正常的文档流，所以高度相对于文档流的container来说无效。
2.在b元素下添加c元素,c元素样式clear:left

<body>
    <div class="container" style="border:1px solid green;">
        <div class="a" style="width:100px; height:100px; border:1px solid red; float:left;">这是一个长很长的页面</div>
        <div class="b" style="width:100px;height:200px; border:1px solid blue; float:right;">块元素</div>
        <div class="c" style="clear:left;"></div>
    </div>
</body>

效果图：

分析：绿色边框container元素有了左侧a元素的高度，因为clear:left清除了左侧a元素的浮动，相当于a元素恢复成文档流元素，所以其高度对于container有效，撑开了其高度。
3.将c元素样式改成clear:right

<body>
    <div class="container" style="border:1px solid green;">
        <div class="a" style="width:100px; height:100px; border:1px solid red; float:left;">这是一个长很长的页面</div>
        <div class="b" style="width:100px;height:200px; border:1px solid blue; float:right;">块元素</div>
        <div class="c" style="clear:right;"></div>
    </div>
</body>

效果图：

分析：c元素的clear:right清除了右侧b元素的浮动，b元素就相当于文档型元素了，所以其高度有效，container被b元素撑开。
4.将c元素改成clear:both

<body>
    <div class="container" style="border:1px solid green;">
        <div class="a" style="width:100px; height:100px; border:1px solid red; float:left;">这是一个长很长的页面</div>
        <div class="b" style="width:100px;height:200px; border:1px solid blue; float:right;">块元素</div>
        <div class="c" style="clear:both;"></div>
    </div>
</body>

效果：