CSS中clear:left/right的含义及用法

来源：互联网发布：otsu算法编辑：程序博客网时间：2024/06/08 02:14

一：定义

clear语法：clear : none | left | right | both取值：none : 默认值。允许两边都可以有浮动对象left : 不允许左边有浮动对象right : 不允许右边有浮动对象both : 不允许有浮动对象

“float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！”，引用鑫哥的话，鑫哥博客源地址为http://www.zhangxinxu.com/wordpress/2014/06/understand-css-clear-left-right-and-use/

二：例子

情景：当我想把< li>横向排列时，就会想到用float：left

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        *{            margin: 0 auto;            padding: 0 auto;            list-style: none;        }        a{            text-decoration: none;        }    </style></head><body>    <div>        <ul>            <li><a href="#">我想要有一万工资</a></li>            <li><a href="#">我想要有两万工资</a></li>            <li><a href="#">我想要有三万工资</a></li>            <li><a href="#">我想要有四万工资</a></li>        </ul>        <p class="p2">所以我必须努力啊啊啊啊嗄</p>        <img src="qw.jpg" style="width: 80px;height: 120px;">    </div></body></html>

这里写图片描述

然而用完却变成这样，p跑到li后面去了，原因是受到了li浮动的影响

这里写图片描述

所以我们必须对p清除左浮动

.p2{    clear: left;}

完整示例代码：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        *{            margin: 0 auto;            padding: 0 auto;            list-style: none;        }        a{            text-decoration: none;        }        li{            float: left;            width: 140px;            height: 40px;            background-color: yellow;        }        .p2{            clear: left;        }    </style></head><body>    <div>        <ul>            <li><a href="#">我想要一万工资</a></li>            <li><a href="#">我想要两万工资</a></li>            <li><a href="#">我想要三万工资</a></li>            <li><a href="#">我想要四万工资</a></li>        </ul>        <p class="p2">所以我必须努力啊啊啊啊嗄</p>        <img src="qw.jpg" style="width: 80px;height: 120px;">    </div></body></html>

看，p又独自一段啦啦啦啦

这里写图片描述

最后，再回味一下那句

”float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！“

阅读全文

0 0