首页 > 代码库 > CSS的浮动

CSS的浮动

2024-10-20 05:51:01   210人阅读

一、float的目的

　　float
     　　  /*浮动 脱离文档流*/

二、语法

　　float：left/right；

三、float的特点

1.子级浮动导致父级高度塌陷

2.行内元素设置浮动，会自动转为块级 可设宽高

3.浮动文本类的标记如果没有指定宽度，浮动后会自动折叠到最小宽度（文本）

4.子级浮动始终在父级包含块内部，不会溢出,不会穿越到padding去

5.浮动会影响别的元素

6.如果父级包含块没有足够空间容纳子级浮动元素，子级自动换行

四、清除float

　　style="clear:both;" //清除所有浮动

五、示例

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul{
            list-style: none;
            width: 300px;
            height: 100px;
            padding-bottom: 20px;
            border-bottom:2px solid red;
            margin:auto;
        }
        .l1{
            width: 84px;
            height: 75px;
            background-image: url("1_03.png");
            float: left;
        }
        .l1:nth-child(1){
            padding-right: 10px;
            border-right: 2px solid red;
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <ul>
        <li class="l1">123</li>
        <li class="l1">213</li>
        <li class="l1">321</li>
    </ul>
</body>
</html>

CSS的浮动


联系
我们