day14-css float样式

一、引子

　　今天说的是这个float样式非常重要，要是不会它，那几乎所有的页面都写不出来，float的意思是浮动的意思，就是让标签都浮动起来，不要受父标签控制，就是脱离了父标签的控制。

二、float 样式

2.1、float 样式

　　因为float是在某个父块级标签中浮动起来，但是如果父标签没有的话，则父标签就是整个window窗口。

　　

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6 </head>
 7 <body>
 8     <div    style="width: 80%;background-color: aquamarine;border: 2px yellow dashed" >
 9         <div style="border:2px dashed rosybrown;width: 20%;float: left;background-color: royalblue ">牛逼</div>
10         <div style="border:2px dashed rosybrown;width: 20%;float: right ">牛逼</div>
11         <div style="clear: both "></div>
12         <!--为了让子div 在父亲div 里面-->
13     </div>
14 </body>
15 </html>

效果：

下面做个小例子，网站的头部

 

 1 <!DOCTYPE html>
 2 <html>
 3 <head lang="en">
 4     <meta charset="UTF-8">
 5     <title></title>
 6     <style>
 7         .pg-head{
 8             background-color: #dddddd;
 9             height: 48px;
10             line-height: 48px;
11             
12         }
13         .float_left{
14             float: left;
15         }
16         .float_right{
17             float: right;
18         }
19     </style>
20 </head>
21 <body>
22     <div class="pg-head">
23         <div class="float_left">收藏本站</div>
24         <div class="float_right">
25             <a>登陆</a>
26             <a>注册</a>
27         </div>
28     </div>
29 
30 </body>
31 </html>

 

posted @ 2018-05-17 13:49  东郭仔  阅读(111)  评论(0)    收藏  举报