css浮动

css浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样

请看下图，当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘：

2当框一向左浮动时，它脱离文档流并且向左移动，直到它的左边边缘碰到包含框的左边缘，因为它不再处于文档流中，所以它不占据空间，实际上是盖住了框2 ，使框2从视图中消失。

 如果把所有的框都向左移动，那么框一向左浮动直到碰到包含框的边缘，另外两个框向左浮动直到碰到前一个浮动框。

3 如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其他浮动块向下移动，直到有足够的空间，如果浮动元素的高度不同，那么当它们向下移动是可能被其它浮动元素卡主，如下图所示：

css float属性

在css中，通过float属性实现元素的浮动

值描述
left 元素向左浮动。
right 元素向右浮动。
none 默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit 规定应该从父元素继承 float 属性的值。

 

 

 

 

float属性的实例：

 1 <!doctype html>
 2 <html>
 3 <meta charset="utf-8"/>
 4 <title></title>
 5 <head>
 6   <style>
 7 <!--  .content{border:1px solid black;} -->
 8 div{color:#ffffff;font-weight:bold;text-align:center;font-size:20px;}
 9 p{margin-top:40px;}
10 .box-top{width:300px;height:100px;}
11 .box-con1{width:300px;height:100px;}
12 .box-con2{width:300px;height:100px;}
13 .d1{width:100px;height:100px;background:#142ab4;float:left;}
14 .d2{width:100px;height:100px;background:#fe0000;float:left;}
15 .d3{width:100px;height:100px;background:#4eff01;float:left;}
16 .d4{width:100px;height:100px;background:#362327;float:left;}
17 .d5{width:100px;height:100px;background:#11234b;float:left;}
18 .d6{width:100px;height:100px;background:#6c410a;float:left;}
19 .d7{width:100px;height:100px;background:#6b0014;float:left;}
20 .d8{width:100px;height:100px;background:#ff00cd;float:left;}
21 .d9{width:100px;height:100px;background:#ff9000;float:left;}
22 .d10{width:100px;height:100px;background:#b6c1ff;float:left;}
23 .d11{width:100px;height:100px;background:#fcff00;float:left;}
24 .d12{width:100px;height:100px;background:#00fff0;float:left;}
25    </style>
26 </head>
27 <body>
28 
29   <div class="box-top">
30     <div class="d1"><p>1<p></div>
31     <div class="d2"><p>2</p></div>
32     <div class="d3"><p>3</p></div>
33     </div>
34   <div class="box-con1">
35     <div class="d4"><p>4</p></div> 
36     <div class="d5"><p>5</p></div>
37     <div class="d6"><p>6</p></div>
38    </div>
39     <div class="box-con2">
40     <div class="d7"><p>7<p></div>
41     <div class="d8"><p>8</p></div>
42     <div class="d9"><p>9</p></div>
43     </div>
44   <div class="box-bott">
45     <div class="d10"><p>10<p></div>
46     <div class="d11"><p>11</p></div>
47     <div class="d12"><p>12</p></div>
48    </div>
49 </body>
50 </html>
View Code

 

posted @ 2017-03-06 13:27  无花即无果  阅读(157)  评论(0)  编辑  收藏  举报