浮动简介

最新推荐文章于 2024-10-08 14:23:59 发布

摸鱼馆er

最新推荐文章于 2024-10-08 14:23:59 发布

阅读量84

点赞数

文章标签： servlet java html

本文链接：https://blog.csdn.net/m0_73032457/article/details/126234824

版权

浮动元素文档流 float属性布局 CSS

关键词由CSDN通过智能技术生成

块元素在文档流会独占一行自上而下排列

如果设置元素浮动，元素脱离文档流后，就不会具有在文档流中的特点

float: ;设置元素的浮动

可选值：

none 默认值，元素正常显示，不浮动

left 元素向左浮动

right 元素向右浮动

float可以使块元素水平布局

设置float浮动特点

1、设置元素浮动之后，元素会脱离文档流，元素原来在文档流中的位置，就不会存在

下面的元素就会上移，挤上去

2、设置元素浮动之后，元素会尽量的向左或者向右，向上进行移动，

而且默认情况下，不会脱离父元素的范围

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <style type="text/css">
      #outer {
        width: 500px;
        height: 600px;
        background-color: #ccc;
        margin: 50px auto;
      }
      .box{
        width: 100px;
        height: 100px;
        background-color: red;
        /* display: inline-block; */
      }
      .box1{
        float: left;
      }
      .box2{
        width: 150px;
        height: 150px;
        background-color: green;
        /* float: left; */
      }
      .box3{
        background-color: indigo;
        /* float: left; */
      }
    </style>
   
    
    -->
  </head>
  <body>
    <div id="outer">
      <div class="box1 box"></div>
      <div class="box2 box"></div>
      <div class="box3 box"></div>
    </div>
  </body>
</html>