CSS——浮动

最新推荐文章于 2022-11-13 21:08:50 发布

weixin_58811914

最新推荐文章于 2022-11-13 21:08:50 发布

阅读量91

点赞数

本文链接：https://blog.csdn.net/weixin_58811914/article/details/117590950

版权

CSS float 属性是一个定位属性，用于使元素脱离正常的文档流，并浮动在它的父容器的左侧或右侧。float 设置元素在水平方向浮动，意味着元素只能左右浮动而不能上下浮动。float 属性的常用值包括:left 靠左浮动、right 靠右浮动、none 不浮动。

下面为一个简单的靠左浮动的例子

<style type="text/css">    
div{            
    width:100px;            
    height:50px;            
    line-height: 50px;            
    text-align: center;              
    margin:10px;
    float:left;                  
}        
.box-1 {            
    border: 3px solid red;        
}        
.box-2 {            
    border: 3px solid blue;        
}    
.box-3 {            
    border: 3px solid green;        
}
</style>
<div class="box-1">Box-1</div>    
<div class="box-2">Box-2</div>
<div class="box-3">Box-3</div>

原图为：

设置靠左浮动后：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自适应布局</title>
    <style type="text/css">
       div{
           text-align:center;
           line-height:60px;
       }
       .left{
             float:left;
             background-color:plum;
       }
       .center{
           height:60px;
           width:auto;
           background-color:skyblue;
       }
       .right{
           float:right;
           background-color:orange;
       }
       .left, .right{
           width:100px;
           height:60px;
       }
    </style>
</head>
<body>
    <div>
        <div href="#" class="left"><strong>left</strong></div>
        <div href="#" class="right"><strong>right</strong></div>
        <div href="#" class="center"><strong>center</strong></div>
    </div>
</body>
</html>

结果：