元素的浮动

浮动属性：float

1.定义：元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

2.基本语法：选择器{float:属性值（left：向左移动 / right:向右移动 / none：不浮动 / inherit：让元素从父级继承浮动属性）

3.网页效果：

4.代码

 

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title></title>
   <style type="text/css">
      #father{                        /*定义父元素的样式*/
         width: 700px;height: 30px;background: lightblue;
         margin: 100px auto 0;
      }
      #son1{
         width: 500px;height: 100%;background: lightcoral;    /*定义第一个子元素样式，在父级中右浮动*/
         display: inline-block;float: right;
      }
      #son2{                                                  /*定义第二个子元素样式，右浮动，紧靠son1*/
         width: 100px;height: 100%;background: lightgreen;
         display: inline-block;float: right;
      }
   </style>
</head>
<body>
/*浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。*/
<div id="father">
   <div id="son1"></div>
   <div id="son2"></div>
</div>
</body>
</html>

 

posted @ 2021-11-12 23:35  三镹  阅读(294)  评论(0)    收藏  举报