css笔记19：浮动的案例

案例一：

1. 首先是01.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="01.css" />
</head>

<body>
<div class="div1">
  <div class="div2 special_div">1div</div>
  <div class="div2">2div</div>
  <div class="div2">3div</div>
  <div class="div2">4div</div>
  <div class="div2">5div</div>
  <div class="div2">6div</div>
</div>
</body>
</html>

 

2. 然后01.css文件：

@charset "utf-8";
/* CSS Document */


.div1 {
    width:800px;
    height:800px;
    border: 1px solid pink;
}

.div2 {
    width:150px;
    height:100px;
    border:1px solid blue;
    background-color:pink;
    margin-top:5px;
    margin-left:5px;
    text-align: center;
    float:left;/*左浮动：指让该元素尽量向左边移动，让出自己右边的空间，给下一个元素*/
}

.special_div {
    height:120px;
}

 

效果图：

总结：

浮动是一个重要的概念，分为左浮动、右浮动和清除浮动。

特别注意：如果一行宽度不够排下所有的div，则会自动换行;当然如果有某个div过大，则会卡住别的div，如上图会后移

 

案例二：

1.首先是01.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="01.css" />
</head>

<body>
<div class="div1">
<div id="div3" class="div2">1div</div>
<div class="div2">2div</div>
<div class="div2">3div</div>
</div>
</body>
</html>

2.然后是01.css文件：

@charset "utf-8";
/* CSS Document */


.div1 {
    width:800px;
    height:800px;
    border: 1px solid pink;
}

.div2 {
    width:150px;
    height:100px;
    border:1px solid blue;
    background-color:pink;
    margin-top:5px;
    margin-left:5px;
    
    text-align: center;
}

#div3 {
    float:right;/*右浮动：让该元素尽量向右移动，直到碰到他的父元素的右边界*/
}

效果图：

posted on 2015-07-07 09:37  鸿钧老祖  阅读(222)  评论(0)  编辑  收藏  举报

导航