css浮动事例

来源：互联网发布：长春大学教务处软件编辑：程序博客网时间：2024/04/30 15:40

<!DOCTYPE html>

<html>

   <head>
    <title>div07.html浮动示例</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">

</body>

</html>

body{
margin: 0px auto; width: 1000px; height: 1000px;
border: 1px solid pink; }
.div1{
margin-top:10px; margin-left:10px;

width:150px; height:100px;
border: 1px solid blue;

background-color: pink;

float: left;/*左浮动*/
float: right;/*右浮动*/

}

例 2

<html>

   <head>
    <title>div07.html浮动示例</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">

<div class="div2">2div左对齐</div>

</body>

</html>

body{
margin: 0px auto; width: 1000px; height: 1000px;
border: 1px solid pink; }
.div1{
float: right; }
.div2{
/*float: left;*/ }
.div3{ }
.div1,.div2,.div3{ margin-top:10px; margin-left:10px;

width:150px; height:100px;
border: 1px solid blue;

background-color: pink; }

浮动
如果我们的div框很多，外面的框无法容纳水平排列的浮动div元素，那么其它浮动块向下移动，直到有足够的空间。
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。

例3

<!DOCTYPE html> <html>

<head>
<title>div09.html浮动示例</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">

</head>
<body>
<div class="div1 div1_1">1div</div>

</body> </html>
body{
margin: 0px auto; width: 600px; height: 600px;
border: 1px solid pink; }
.div1,.div2,.div3,.div4{

margin-top:10px; margin-left:10px;

width:150px; height:100px;
border: 1px solid blue;

background-color: pink; }

.div1{
float: left; }
.div1_1{
height: 120px; }

0 0