float的属性

最新推荐文章于 2025-11-24 21:21:07 发布

原创最新推荐文章于 2025-11-24 21:21:07 发布 · 354 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #css #javascript

本文介绍了CSS中的浮动布局，通过`float`属性实现元素的左右浮动，展示了一个包含多个图片和文字的示例，其中图片使用`float:right`显示在右侧。内容详细解释了如何调整元素在页面上的相对位置，帮助理解网页布局的基本原理。

思路1:浮动（漂浮在标准文档流之上）
思路2：常用的属性值
float:left
float:right
float:none
案例：
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           div{
              margin: 10px;
              padding: 5px;
           }
           #father{
              border: 1px solid red;
           }
           #im1{
              border: 1px dashed blue;
              float: right;
           }
           #im2{
              border: 1px dashed blue;
           }
           #im3{
              border: 1px dashed green;
           }
           #im4{
              border:1px dashed blue;
           }
       </style>
   </head>
   <body>
       <div id="father">
           <div id="im1">
               <img src="image/photo-1.jpg"/>
           </div>
           <div id="im2">
               <img src="image/photo-2.jpg"/>
           </div>
           <div id="im3">
               <img src="image/photo-3.jpg"/>
           </div>
           <div id="im4">
               我是范德萨发生发到发送地方阿斯蒂芬sad发放
               我是范德萨发生发到发送地方阿斯蒂芬sad发放
               我是范德萨发生发到发送地方阿斯蒂芬sad发放
               我是范德萨发生发到发送地方阿斯蒂芬sad发放
           </div>
       </div>
   </body>
</html>