css float属性

最新推荐文章于 2022-10-13 17:59:04 发布

开发_李行

最新推荐文章于 2022-10-13 17:59:04 发布

阅读量240

点赞数

分类专栏： css学习

本文链接：https://blog.csdn.net/qq_34707150/article/details/78678904

版权

css学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

CSS float属性定义元素在哪个位置浮动。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

有四个选项：

1、none （无浮动）如果一个元素设置为none，则会脱离其他元素独立成行。

2、left （浮动到左边）

3、right（浮动到右边）

4、inherit（从父元素继承float属性值）

（1）如果一个元素设置为inherit，在它之前还有元素占据部分空间，则在当前行中该元素会占据剩余的所有空间；代码如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding: 0px; margin: 0px;}
        div{padding: 20px; margin: 30px auto; height: auto; overflow: hidden; width: 900px; border: solid 1px #060;}
        ul{list-style: none;}
        a{color: #c90; font-size: 12px; text-decoration: none;}
        a:hover{color: #f00;}
        li{float: right;}
    </style>
</head>
<body>
<div>
    <ul>
        <li style="border: solid blue 1px"><a href="#">一朵鲜花</a></li>
        <li style="float: inherit;border: solid red 1px"><a href="#">大家都喜欢</a></li>
    </ul>
</div>
</body>

效果图如下：

（2）如果一个元素设置为inherit，在它之前无元素设置，则它独占一行；代码如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{padding: 0px; margin: 0px;}
        div{padding: 20px; margin: 30px auto; height: auto; overflow: hidden; width: 900px; border: solid 1px #060;}
        ul{list-style: none;}
        a{color: #c90; font-size: 12px; text-decoration: none;}
        a:hover{color: #f00;}
        li{float: right;}
    </style>
</head>
<body>
<div>
    <ul>
        <li style="border: solid blue 1px"><a href="#">一朵鲜花</a></li>
        <li style="float: inherit;border: solid red 1px"><a href="#">大家都喜欢</a></li>
        <li style="float: inherit;border: solid green 1px;margin-top: 10px;"><a href="#">后盾网论坛2</a></li>
    </ul>
</div>
</body>

效果图如下：

注意：如果一个元素内容超过一行，则会另起一行为该元素提供位置。

开发_李行

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css float属性

CSS float属性定义元素在哪个位置浮动。在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。有四个选项：1、none （无浮动）如果一个元素设置为none，则会脱离其他元素独立成行。2、left （浮动到左边）3、right（浮动到右边）4、inherit（从父元素继承float属性值）（1）如果一个元素设置为inherit，在它
复制链接

扫一扫

专栏目录