前端：CSS/11/CSS浮动和清除，CSS继承性，CSS优先级

最新推荐文章于 2022-12-16 23:17:23 发布

原创最新推荐文章于 2022-12-16 23:17:23 发布 · 316 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文详细解析CSS中的浮动(float)和清除(clear)属性，包括它们如何使元素向左或右侧浮动，以及如何通过清除浮动恢复正常布局。此外，还介绍了CSS继承性和优先级的概念，以及如何使用浮动实现并列排版。

CSS浮动和清除

float:让元素浮动，取值：left(左浮动)，right(右浮动)；
clear:清除浮动，取值left(清除左浮动)，right(清除右浮动) both(左右浮动都去掉)；

1，CSS浮动

浮动的元素，将向左或躺浮动，浮动到包围元素的边上，或上一个浮动元素的边上为止，
浮动的元素，不再占空间了，并且，浮动元素的层级要高于普通元素（优先于普通元素显示）。
浮动的元素，一定是块元素了，不管原来是什么元素。
浮动的元素，没有指定宽度的话，浮动后它将尽可能的变窄，因此浮动元素一般要定宽和高。
浮动的功能：可以实现多个块元素并列排版；

2，CSS清除浮动

CSS清除浮动的功能有两个：（1）可以包围元素从“视觉上”包住浮动元素（2）清除之下的其它元素将恢复默认排版。
有浮动，就得有清除；
如果包围元素指定了高度，那么可以不清除；

CSS继承性

CSS属性继承：外层元素的样式，会被内层元素进行继承，多个外层元素的样式，最终都会“叠加”到内层元素上；能被继承的属性有：
1，CSS文本属性都会被继承：
color,font-size,font-family,font-style,font-weight,text-align,text-decoration,text-indent,letter-spacing,line-height;

CSS优先级

1，单个选择器的优先级:
行内样式>ID选择器>class选择器>标签选择器
2,多个选择器的优先级：
多个选择器的优先级，一般指向越准确，优先级越高；
特殊情况下，我需要假设一些值：
标签选择器的优先级为1；
class选择器的优先级为10；
ID选择器的优先级为100；
行内样式的优先级为1000；
如果优先级相同时，后执行的代码将覆盖前面的代码，代码的一般执行顺序为从上到下，从左到右；

利用CSS浮动排版的一个例子如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS=浮动</title>
    <style type="text/css">
        /* 全局CSS样式 */
        body,
        ul,
        li,
        a,
        img {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        a:link,
        a:visited {
            color: #007FFF;
            text-decoration: none;
        }

        a:hover {
            color: red;
        }

        body {
            font-size: 12px;
            font-family: 宋体;
        }

        /* 一个模块的CSS样式 */
        .div {

            width: 300px;
            margin: 20px auto;
            /* 居中 */
        }

        .div img {
            width: 100px;
            height: 150px;
            border: none;
            padding: 2px 0;
        }

        body {
            background-color: #00FFFF;
            text-align: center;
        }

        .div li {

            text-align: center;
            background-color: #CDCDCD;
            float: left;
            padding: 5px 10px;
        }

        .div.ul.li a {
            float: right;
        }
    </style>
</head>

<body>
    <div class="div">
        <ul>
            <li>
                <a href="#"><img src="images\td.jpg" /></a><br />
                <a href="#">曹伟-玩酷我的程序人生</a>
            </li>
            <li>
                <a href="#"><img src="images\td1.jpg" /></a><br />
                <a href="#">王东方-辣妈挑战PHP</a>
            </li>
            <li>
                <a href="#"><img src="images\td2.jpg" /></a><br />
                <a href="#">康红红专题-因为爱情</a>
            </li>
            <li>
                <a href="#"><img src="images\td3.jpg" /></a><br />
                <a href="#">刀郎-2008年的第一场雪</a>
            </li>
        </ul>
    </div>
</body>

</html>