css 浮动

2023-10-07 21:50:10

一、浮动的定义

　　使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘碰到包含框或另一个浮动框的边框为止。

　　说到脱离文档流要说一下什么是文档流，文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

二、属性

　　float：left；左浮动

　　float：right；右浮动

三、浮动的情况

当没有添加左右浮动时因为是块级元素，能够设置大小不能共处一行，所以就会出现下面的情况

给每一个元素添加左浮动时

<!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>Document</title>
<style>
 
  #a{
    width: 100px;
    height: 100px;
    background-color: aqua;
    float: left;   左浮动

float: right;右浮动

  }
  #b{
    width: 100px;
    height: 100px;
    background-color: rgb(47, 22, 116);
    float: left;　　　　左浮动

float: right;右浮动

  }
  #c{
    width: 100px;
    height: 100px;
    background-color: rgb(110, 190, 45);
    float: left;　　　　左浮动

　　　　float: right;右浮动

  }
</style>
</head>
<body>

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

</body>
</html>

都添加左浮动后3个块级元素盒子既可以在一行内而且是在浏览器的左侧    右浮动同理，float: right;

当我们只给第二个盒子一个浮动时我们会发现第3个盒子不见了

其实并不是第3个盒子不见了我们给第三个盒子多一点宽度就会发现

四、浮动之后有很多特性

　　1.块级元素可以横排显示

　　2.行内元素可以设置宽度和高度

　　3.元素没有设置宽度和高度时，宽度为内容撑开宽

　　4.支持margin

　　5.脱离文档流

　　6.提升半层级

码农公寓

相关文章