CSS浮动特性

今天药忘吃喽~ 2021-11-13 15:48 281阅读 0赞

float：left/right左浮动有浮动

特点：  
①浮动不占位：浮动元素不占位置  
②默认排列成一行，遇到边界自动换行  
③如果有文字（没有设置浮动的元素内容）会绕着浮动元素走

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>浮动</title>
    		<style type="text/css">
    			.main{
    				width: 310px;
    				margin: 0 auto;
    				border: 1px solid black;
    				/*overflow: hidden;*/
    			}
    			.first{
    				width: 80px;
    				height: 80px;
    				margin: 10px;
    				background-color: cornflowerblue;
    				text-align:center;
    				/*元素浮动*/
    				float: left;
    				
    			}
    			/*.main .last{
    				clear: both;
    			}*/
    		</style>
    	</head>
    	<body>
    		<div class="main">
    			<div class="first">1</div>
    			<div class="first">2</div>
    			<div class="first">3</div>
    			<div class="first">4</div>
    			<div class="first">5</div>
    			<div class="first">6</div>
    			<div class="first">7</div>
    			<div class="first">8</div>
    			
    		</div>
    	</body>
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pfaXB5dGhvbg_size_16_color_FFFFFF_t_70]

清除浮动的两种方式：  
①在主块级元素css中设置：overflow:hidden  
②在子块级后面创建一个空白的div，设置clear:both  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pfaXB5dGhvbg_size_16_color_FFFFFF_t_70 1]

温馨提示：后期会继续填充优化，写的不好的地方欢迎指正！

转载于:https://www.cnblogs.com/ilovepython/p/11068877.html

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pfaXB5dGhvbg_size_16_color_FFFFFF_t_70]: /images/20211113/7ccd55a70f4e423db4dabedc30792bff.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pfaXB5dGhvbg_size_16_color_FFFFFF_t_70 1]: /images/20211113/d9b8a26d8ff44fa287f2c127f8882ccd.png