css之浮动

最新推荐文章于 2024-05-21 21:13:29 发布

noveto

最新推荐文章于 2024-05-21 21:13:29 发布

阅读量31

点赞数

分类专栏： css 文章标签： css html 前端

本文链接：https://blog.csdn.net/weixin_47906677/article/details/134420040

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.浮动一

<!DOCTYPE html>
<html>
          <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <style type="text/css">
                             .box1{
                                  width:200px;
                                  height:200px;
                                  background-color:yellow;
 
                                  float：right；
                             }
                                  /*
                                   *块元素在文档流中默认垂直排列，所以这三个div自上而下依次排开
                                   *如果希望块元素在页面中水平排列，可以使块元素脱离文档流
                                   *使用float来使元素浮动，从而脱离文档流
                                   *可选值：
                                   *           none，默认值，元素默认在文档流中排列
                                   *           left：元素会立即脱离文档流，向页面的左侧浮动
                                   *           right：元素会立即脱离文档流，向页面的右侧浮动
 
                                   *当为一个元素设置浮动以后（float属性是一个非none的值）
                                   *元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动
                                   *元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素的边框，或者其它的浮动元素
                                   *如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
                                   *浮动的元素不会超过她上边的兄弟元素，最多最多一边齐
                                   */
 
                             .box2{
                                  width:200px;
                                  height:200px;
                                  background-color:red;
 
                                  float：right；
                             }
 
                             .box3{
                                  width:200px;
                                  height:200px;
                                  background-color:green;
                             }
 
                 </style>
          </head>
          <body>
                    <!--
                           
                     -->
                    <div class="box1"></div>
                    <div class="box2"></div>
                    <div class="box3"></div>
          </body>
</html>

2.浮动二

<!DOCTYPE html>
<html>
          <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <style type="text/css">
                             
                            *{
                                margin:0;
                                padding:0;
                            }
 
 
                            .box1{
                                 width:100px；
                                 height:100px;
                                 backdround-color:#bfa;
 
                                 /*
                                  *浮动的元素不会盖住文字，文字会自动环绕在元素的周围
                                  *所以我们可以通过浮动来设置文字环绕图片的效果
                                  */
                
                                float：left；
                             }
 
                              .p1{
                                     height:200px;
                                     background-color:yellow;
                              }
 
                              .s1{
                                     /*
                                      *开启span的浮动
                                      *内联元素脱离文档流以后会变成块元素
                                      */
 
 
 
                                     float:left;
                                     width:100px;
                                     height:100px;
                                     background-color:yellow;
                              }
 
                 </style>
          </head>
          <body>
                    <!--
                     -->
 
                    <div class="box1"></div>
 
                   <p class="p1"></p>
 
          </body>
</html>

3.清除浮动

<!DOCTYPE html>
<html>
          <head>
                    <meta charset="UTF-8">
                    <title></title>
                    <style type="text/css">
                            .box1{
                                 width:100px;
                                 height:100px;
                                 background-color:yellowgreen;
                                 /*
                                  *设置box1向左浮动
                                  */
                                 float:left;
                             }
 
                            .box2{
                                 width:200px;
                                 height:200px;
                                 background-color:yellow;
                                 /*
                                  *由于受到box1浮动的影响，box2整体向上移动了100px
                                  *我们有时希望清除掉其他元素浮动时对当前元素产生的影响，这时可以使用clear来完成功能
                                  *clear可以用来清除其他浮动元素对当前元素的影响
                                  *可选值：
                                  *            none  默认值，不清除浮动
                                  *            left   清除左侧浮动元素对当前元素的影响
                                  *            right   清除右侧元素对当前元素的影响
                                  *            both    清除两侧元素对当前元素的影响（清除对她影响最大的元素的浮动）
                                  */
 
                                  clear：left；
                             }
 
                            .box1{
                                 width:300px;
                                 height:300px;
                                 background-color:green;
                             }
 
                 </style>
          </head>
          <body>
           
                     <div class="box1"></div>
 
                     <div class="box2"></div>
 
  
                     <div class="box2"></div>                     
          </body>
</html>