CSS定位-浮动

来源：互联网发布：js getparameter 编辑：程序博客网时间：2024/06/06 09:31

CSS浮动

1，浮动：

float 属性可用的值

left：元素向左浮动

right：元素向右浮动

none：元素不浮动

inherit：从父级继承浮动属性

2，clear 属性：

去掉浮动属性（包括继承来的属性）

clear 属性值：

left，right：去掉元素向左，向右浮动。

both：左右两侧均去掉浮动。

inherit：从父级继承clear 的值。

事例：

.html

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>浮动</title>    <link rel="stylesheet" href="style.css" type="text/css" /></head><body>    <div id="container">        <div id="fd"></div>        <div id="sd"></div>        <div id="td"></div>    </div></body></html>

.CSS

#fd{    width: 100px;    height: 150px;    background-color: red;    float: left;}#sd{     width: 150px;     height: 100px;     background-color: blue;    float: left; }#td{    width: 100px;    height: 100px;    background-color: green;    float: left;}#container{    width: 300px;    height: 500px;    background-color: darkgrey;}

在浏览器中显示的效果：

CSS定位-浮动的简单应用

瀑布流

.html

<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>瀑布流</title>    <link rel="stylesheet" href="style.css" type="text/css" /></head><body>     <div id="div1">         <ul>             <li><img src="Images/1.jpg"></li>             <li><img src="Images/2.jpg"></li>             <li><img src="Images/3.jpg"></li>         </ul>         <ul>             <li><img src="Images/4.jpg"></li>             <li><img src="Images/5.jpg"></li>             <li><img src="Images/6.jpg"></li>         </ul>         <ul>             <li><img src="Images/7.jpg"></li>             <li><img src="Images/8.jpg"></li>             <li><img src="Images/9.jpg"></li>         </ul>     </div></body></html>

.CSS

*{    /*所有的属性都集成该特性*/    margin: 0px;    padding: 0px;}li{    /*去掉默认的前缀点*/    list-style: none;}#div1{    width: 950px;    height: auto;    margin: 20px auto;}ul{    width: 250px;    float: left;}

在浏览器中显示的效果：

0 0