CSS-浮动

绝地灬酷狼 2022-05-03 03:28 318阅读 0赞

**1.浮动(float)的基础知识**  
float:left;向左浮动  
float:right;向右浮动  
float:none;元素不浮动  
float:inherit;从父级继承浮动  
**浮动**就是让元素可以向左或向右移动直到他的外边距其父级的内边距或者上一个元素的外边距。浮动的元素不会遮住文字，文字会自动环绕在图片四周，所以我们可以通过浮动设置文字环绕效果  
**浮动特点**  
1.如果浮动元素上边是一个没有浮动的块元素则浮动元素不会超过块元素

<head>
    <style type="text/css">
    *{
    	margin:0px;
    	padding:0px;
    }
    
    .box1{
    	width:50px;
    	height:50px;
    	background-color:#C63;	
    }
    .box2{
    	width:50px;
    	height:50px;
    	background-color:#0F6;
    	float:right;		
    }
    </style>
    </head>
    <body>
    <div class="box1"></div>
    <div class="box2"></div>
    </body>

**效果**  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_27_color_FFFFFF_t_70]  
2.浮动的元素不会超过他上边的兄弟元素最多一边齐

效果如下  
![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_27_color_FFFFFF_t_70 1]

3.浮动以后元素就脱离文档流了，此时块级元素会变成内联元素宽度和高度都会被内容撑开，内联元素会变成块级元素  
**4.div布局实例**

<!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>div布局</title>
    <style type="text/css">
    
    *{
    	margin:0px;
    	padding:0px;
    }
    .header{
    	background-color:#3FC;
    	width:800px;
    	height:50px;
    	margin:20px auto;
    }
    .content{
    	width:800px;
    	height:600px;
    	background-color:#F66;
    	margin:20px auto;
    }
    .content-left{
    	width: 100px;
    	height: 600px;
    	background-color:#0F0;
    	float:left;
    }
    .centent-body{
    	width: 600px;
    	height: 600px;
    	background-color:#06C;
    	float:left;
    }
    .box1{
    	width:150px;
    	height:250px;
    	background-color:#C63;
    	float:left;
    	margin-right:50px;<1--设置右外距-->
    	margin-left:25px;
    }
    .box2{
    	width:150px;
    	height:250px;
    	background-color:#C63;
    	float:left;
    	margin-right:50px;
    	
    }
    .box3{
    	width:150px;
    	height:250px;
    	background-color:#C63;
    	float:left;
    	margin-right:25px;
    }
    .box4{
    	width:150px;
    	height:250px;
    	background-color:#639;
    	float:left;
    	margin:50px 50px 10px 25px;
    }
    	
    .box5{
    	width:150px;
    	height:250px;
    	background-color:#639;
    	float:left;
    	margin:50px 50px 10px 0px;
    }
    	
    .box6{
    	width:150px;
    	height:250px;
    	background-color:#639;
    	float:left;
    	margin:50px 25px 10px 0px;
    }
    	
    
    .content-right{
    	width: 100px;
    	height: 600px;
    	background-color:#F30;
    	float:left;
    }
    
    
    .footer{
    	width:800px;
    	height:50px;
    	background-color:#6CF;
    	margin:20px auto;
    }
    </style>
    </head>
    <body>
    <div class="header"></div>
    <div class="content">
    <div class="content-left"></div>
    <div class="centent-body">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5"></div>
    <div class="box6"></div>
    </div>
    <div class="content-right"></div>
    </div>
    <div class="footer"></div>
    </body>
    </html>
    效果图如下:建立自己多练练div布局，div布局说简单点就是摆放盒子至于怎么摆放我会在后续文章中持续更新！！！

![效果图][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_27_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_27_color_FFFFFF_t_70]: /images/20220503/04995c0767d94d00a8170ebb016e458c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_27_color_FFFFFF_t_70 1]: /images/20220503/b6a425fdc92b4988a645fd3dabfad219.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2R3ZWJsb3Zlcg_size_27_color_FFFFFF_t_70 2]: /images/20220503/cb96c4e4ec2240ea990333cab19014f8.png