CSS的浮动

最新推荐文章于 2022-09-26 16:48:08 发布

weixin_33933118

最新推荐文章于 2022-09-26 16:48:08 发布

阅读量39

点赞数

原文链接：http://www.cnblogs.com/hjl-x/p/7141230.html

版权

一、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>

转载于:https://www.cnblogs.com/hjl-x/p/7141230.html

weixin_33933118

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS的浮动

一、float的目的　　float 　　 /*浮动脱离文档流*/二、语法　　float：left/right；三、float的特点1.子级浮动导致父级高度塌陷2.行内元素设置浮动，会自动转为块级可设宽高3.浮动文本类的标记如果没有指定宽度，浮动后会自动折叠到最小宽度（文本）4.子级浮动始终在父级包含块内部，不会溢出,不会穿越到padding去5.浮...
复制链接

扫一扫