float浮动的一些基础常识

Posted tian-520

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了float浮动的一些基础常识相关的知识,希望对你有一定的参考价值。

技术分享图片

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9    <style>
10    *{margin: 0;padding: 0;}
11     /* 先给定义的box一个高度和宽度 */
12    .box{width: 1200px;height: 50px;outline:1px red solid;margin:30px auto;}
13    /* 去除ul无序列表的全局样式 */
14    ul{list-style:none;}
15    /* 再给li的父级一个宽高 */
16    .box>ul{height: 100%;width: 100%;}
17    /* 再给li一个宽高 宽是父级除以他的子级的出来的*/
18    .box>ul>li{height:100%;width: 150px;outline: 1px solid pink;
19    /* 这是左浮动,要想右浮动就直接把left改变成right; */
20    float: left;
21    /* 这里让li里面的内容在他的宽度里水平居中 */
22    text-align: center;
23    /* 这里是让li里面的内容在他的高度里面垂直居中 注:他的父级有多高那么就可以设置他的行高为多少 */
24    line-height: 50px;
25    }
26    </style>
27     
28 </head>
29 <body>
30    <div>
31       <!-- 这是一个外边框的盒子 -->
32       <div class="box">
33           <ul>
34               <li>你好!明天</li>
35               <li>你好!明天</li>
36               <li>你好!明天</li>
37               <li>你好!明天</li>
38               <li>你好!明天</li>
39               <li>你好!明天</li>
40               <li>你好!明天</li>
41               <li>你好!明天</li>
42           </ul>
43       </div>
44    </div>
45 </body>
46 
47 </html>

 

以上是关于float浮动的一些基础常识的主要内容,如果未能解决你的问题,请参考以下文章

float浮动属性的基本常识

java中的一些常识

浅谈float浮动

将float标签放在kendoReact DatePicker中

夯实基础--CSS=>浮动(float)

float浮动