【CSS浮动】

刘伊珂

已于 2024-07-15 11:33:12 修改

阅读量321

点赞数 1

文章标签： css 学习 html 前端

于 2023-03-28 20:51:45 首次发布

本文链接：https://blog.youkuaiyun.com/2301_77116754/article/details/129824507

版权

前言

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

Float（浮动），往往是用于图像，但它在布局时一样非常有用。

一、元素怎样浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

如果图像是右浮动，下面的文本流将环绕在它左边

用法：float：left/right

二、浮动产生的问题

会让元素脱离文档流

二、使用方法

1.让div浮动

代码如下（示例）：

div{
float:left;
   }

2.清除浮动

元素浮动之后，周围的元素会重新排列，为了避免这种情况，需要清除浮动。利用clear属性。

代码如下（示例）：

.center{
width: 100%;
height: 100px;
background-color: blueviolet;
/* 清除浮动，让该元素的左右两边不能有浮动元素 */
clear: both;
}

3.网页布局

使用浮动，进行网页布局（左中右）

代码如下（示例）：


<head>

<style type="text/css">
* {
   margin: 0;
   padding: 0;
   }
html,body {
           width: 100%;
           height: 100%;
           }
.left {
       background-color: red;
       float: left;
       width: 200px;
       height: 100%;
       }
.right {
       background-color: yellow;
       float: right;
       width: 200px;
       height: 100%;
       }
.center {
         width: 100%;
         height: 100%;
         background-color: blueviolet;
         }
</style>
</head>
<body>
      <div class="left">
      left
      </div>
      <div class="right">
      right
     </div>
     <div class="center">
      12321312312312321
      </div>
</body>