css float属性

来源：互联网发布：linux 新建数据库实例编辑：程序博客网时间：2024/06/09 21:08

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