css中clear的理解

最新推荐文章于 2022-06-29 11:25:31 发布

Night_Emperor

最新推荐文章于 2022-06-29 11:25:31 发布

阅读量1.1k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/Night_Emperor/article/details/74539682

版权

CSS 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>  
<html>  
<head>  
    <title>demo</title>  
    <meta charset="utf-8">  
    <style type="text/css">  
        .c-1{  
            background-color: red;  
            width: 120px; 
            height: 120px; 
        }  
        .c-2{  
            background-color: yellow;  
            width: 50px;
            height: 50px;   
        }  
        .c-3{  
            background-color: blue;  
            width: 100px; 
            height: 100px; 
        }  
        .c-4{  
            background-color: greenyellow;  
            width: 100px;
            height:100px;   
        }  
    </style>  
</head>  
<body> 
    <div class="container" style="border:1px solid green;width: 500px;">  
        <div class = "c-1" style = "float:left;"></div>  
        <div class = "c-2" style = "float:left;"></div>  
        <div class = "c-3" style = "float:left;"></div>
        <div class = "c-4" style = "float:left;"></div>
    <div>    
</body>  
</html>

运行结果：
这里写图片描述

对div c-3进行修改，添加clear：left后，发现所有元素依旧脱离标准文档流，container的高度仍为0，但是c-3， c-4的位置发生了变化。

<div class="container" style="border:1px solid green;width: 500px;">  
        <div class = "c-1" style = "float:left;"></div>  
        <div class = "c-2" style = "float:left;"></div>  
        <div class = "c-3" style = "float:left;clear: left;"></div>
        <div class = "c-4" style = "float:left;"></div>

这里写图片描述

将c-3的float属性去掉，container有了高度。

<div class="container" style="border:1px solid green;width: 500px;">  
        <div class = "c-1" style = "float:left;"></div>  
        <div class = "c-2" style = "float:left;"></div>  
        <div class = "c-3" style = "clear: left;"></div>
        <div class = "c-4" style = "float:left;"></div>

这里写图片描述

将c-1,c-2改为float：right：

<div class="container" style="border:1px solid green;width: 500px;">  
        <div class = "c-1" style = "float:right;"></div>  
        <div class = "c-2" style = "float:right;"></div>  
        <div class = "c-3" style = "clear: right;"></div>
        <div class = "c-4" style = "float:left;"></div>

这里写图片描述
再次改变c-1,c-2的float值：

<div class="container" style="border:1px solid green;width: 500px;">  
        <div class = "c-1" style = "float:left;"></div>  
        <div class = "c-2" style = "float:right;"></div>  
        <div class = "c-3" style = "clear: right;"></div>
        <div class = "c-4" style = "float:left;"></div>
    <div>

这里写图片描述

总结：clear属性不会影响其他或自身元素是否回到标准文档流，只是对自身元素的位置产生影响。

Night_Emperor

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css中clear的理解

<!DOCTYPE html> <html> <head> <title>demo</title> <meta charset="utf-8"> <style type="text/css"> .c-1{ background-color: red; width: 120px;
复制链接

扫一扫