浮动：；；

最新推荐文章于 2024-09-29 21:22:01 发布

可爱的奥特曼

最新推荐文章于 2024-09-29 21:22:01 发布

阅读量72

点赞数

文章标签： html css css3

本文链接：https://blog.csdn.net/a123003005/article/details/121162827

版权

本文介绍了HTML布局中的两种重要技术——浮动和定位。浮动特性包括元素脱离标准流、一行内显示并顶部对齐，以及不占用原来的位置。通过设置`float:left`，实现了多个块级元素在同一行排列。定位则允许更精确地控制网页元素的位置，增强了设计灵活性。

摘要由CSDN通过智能技术生成

标准流：默认的布局方式，标签按规定排列。

浮动：可以让多个块级元素一行排列显示。

定位：实现网页中元素的精确定位。、

浮动特性：

1：浮动元素会脱离标准流（脱标）。

2：浮动元素会一行内显示并且元素顶部对齐。

3：浮动的元素会具有行内块元素的类似特性。

4：浮动的元素，漂流在普通流上，不占位置。脱标！

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>浮动</title>
       <style type="text/css">
           /* 加一个大盒子的变化 */
           .bigbox{
               background-color: palevioletred;
           }
           .bigbox div{
               float: left; /* 浮动:float 不浮动:none*/
               width:200px;
               height:100px;
               border:1px solid aqua;
               background-color: royalblue;
               color:white;
           }
           .box1{
               background-color: gold;
           }
       </style>
   </head>
   <body>
       
       
   <div class="bigbox">
       <div class="box1">啊</div>
       <div class="box2">杰克</div>
       <div class="box3">啊</div>
       <div class="box4">露丝</div>
       <div class="box5">再见</div>
   </div>
   </body>
</html>