CSS中的浮动float详解

Original 2019-03-19 00:50:00 360
abstract:浮动float,其属性只有相左left和想youright浮动浮动后需要用clear:both来清除浮动具体使用浮动做的导航栏代码如下:<html>     <head>         <meta charset="utf-8&
  1. 浮动float,其属性只有相左left和想youright浮动

  2. 浮动后需要用clear:both来清除浮动

  3. 具体使用浮动做的导航栏代码如下:
  4. <html>
        <head>
            <meta charset="utf-8">
            <title>边框</title>
            <link rel="icon" href="" type="image/x-icon"> 
            <style type="text/css">
            	.border{
            		width: 100px;
            		height: 100px;
            		border: none/*1px solid #ccc*/;
            		border-radius: 50%;
            		box-shadow: 0px 10px 100px #ccc;
            		float: left;
            		background-color: #bbb;
            	}
            	ul li{list-style: none; width: 80px;height: 30px;background: #ccc;margin: 2px;line-height: 30px;text-align: center;float: left;}
            </style>
        </head>
        <body>
       		<ul>
       			<li>JAVA</li>
       			<li>PHP</li>
       			<li>HTML</li>
       			<li>MYSQL</li>
       		</ul>
        </body>
       </html>
       <html>


  5. 使用浮动前

  6. 使用浮动后QQ截图20190319004610.pngQQ截图20190319004634.png

Correcting teacher:天蓬老师Correction time:2019-03-19 09:27:57
Teacher's summary:清浮动的方式很多, 评价的标准就是不要在页面中添加多余的html标签, 要保持一定的兼容性

Release Notes

Popular Entries