CSS基础学习9-CSS设置浮动元素(float)

最新推荐文章于 2025-07-30 10:39:24 发布

原创最新推荐文章于 2025-07-30 10:39:24 发布 · 698 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

CSS 专栏收录该内容

12 篇文章

订阅专栏

本文详细介绍了CSS中如何使用float属性使元素向左或向右浮动，并解释了clear属性的作用，即控制浮动元素之后的元素如何围绕浮动元素排列。通过实际代码示例展示了这些属性的应用。

所有CSS基础学习文档下载地址：http://download.youkuaiyun.com/detail/rongrong_love_lc/9663463

九、CSS设置浮动元素(float)
    通过float属性令元素向左或向右浮动。也就是说，令盒子及其内容浮动到文档（或者是上层盒子）的左边或者右边。
    value:left、right、none。
    html文件如下：
      <html>
          <head>
              <title>Color例子</title>
              <link rel="stylesheet" type="text/css" href="color.css"/>
          </head>
          <body>
          <div id="picture1">
              <img src="image1.jpg" alt="Back Picture" />
              </div>
          <div id="picture2">
              <img src="image1.jpg" alt="Back Picture" />
          </div>
          <p>study测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息study</p>

          </body>
      </html>
    CSS文件如下：
      #picture1{float : left;
            width : 100px;
               }
      #picture2{float : right;
            width : 50%;
                }


    1.clear属性：
        用于控制浮动元素的后继元素的行为。
        缺省时，后继元素将向上移动，以填补由于前面元素的浮动而空出的可用控件。
        value:left、right、both、none。
        原则：如果一个盒子的clear属性被设置为both，那么该盒子的上边距将始终处于前面的浮动盒子的下  边距之下。
        html文件如下:
          <html>
            <head>
              <title>Color例子</title>
              <link rel="stylesheet" type="text/css" href="color.css"/>
            </head>
           <body>
              <div id="picture1">
                  <img src="image1.jpg" alt="Back Picture" />
              </div>

           <p  class="right">study测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息studystudy测试文本信息studystudy测试文本信息
                  studystudy测试文本信息study</p>
          <h1 class="right">测试信息1</h1>
          <h2 class="left">测试信息2</h2>
        </body>
      </html>

    CSS文件如下:
      #picture1{float : left;
                width : 100px;
                }
      #picture2{float : right;
                width : 50%;
                }
      .both {clear:both;
             }
      .left {clear:left;}
      .right {clear:right;}