css基础之浮动相关学习-EW帮帮网

一、浮动基本介绍

在最初，浮动是用来实现文字环绕图片效果的，现在浮动是主流的页面布局方式之一。

效果/代码

图片环绕

代码

  div {
       width: 600px;
       height: 400px;
       background-color: skyblue;
     }
     img {
       width: 200px;
       float: right;
       margin-right: 0.5em;
     }
 <div>

文字环绕

代码

 <style>
     div {
       width: 600px;
       height: 400px;
       background-color: skyblue;
     }
     img {
       width: 200px;
       float: right;
       margin-right: 0.5em;
     }
     .cont::first-letter {
       font-size: 80px;
       float: left;
     }
  </style>
</head>
<body>
    <div>
       <img src="../富掌柜app.jpg" alt="">
       Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos totam aliquid magni nisi recusandae mollitia accusantium, perspiciatis, debitis necessitatibus, similique maiores officia asperiores dolorem nulla! Iste a facilis, assumenda at fugit debitis deserunt natus ipsum dolor vel ratione aperiam modi nulla. Quo voluptates tempora blanditiis enim qui provident incidunt est rerum quam ad. Ea iure officiis eaque alias id delectus, doloremque harum blanditiis tempore quos sint beatae, illum ullam quod sit in veritatis molestiae! Deserunt, facere. Cupiditate accusantium animi alias, esse neque repellat ipsa nostrum nisi quia numquam aut veniam impedit sint sunt non fugiat ea? Odio nostrum commodi saepe ab tenetur dolor laborum, illo porro impedit nesciunt incidunt placeat tempore eaque fugit autem natus cupiditate. Cumque, vel. Eligendi, exercitationem nostrum. Obcaecati sapiente optio soluta dolores ducimus corporis, expedita dolore? Deserunt minus maxime at perferendis, quidem nisi praesentium ad quasi obcaecati eius distinctio maiores corrupti, nulla voluptatibus iure, voluptatem nihil reprehenderit! Ab architecto autem fuga aliquam libero velit ullam explicabo facere consequuntur deleniti adipisci asperiores debitis enim repellendus qui, incidunt voluptatum commodi praesentium impedit dolores? Ipsam molestiae accusantium maxime quibusdam laboriosam consequuntur ut cum eaque iusto pariatur corrupti unde tenetur suscipit tempora, iste quas voluptatibus earum! Corporis dolorum totam quidem.
    </div>
    <hr>
    <div class="cont">
       Lorem ipsum dolor sit, amet consectetur adipisicing elit. Nobis ipsam aspernatur dicta, vero atque est, obcaecati, error illo in consequuntur accusamus natus tempora id maxime. Quidem harum deleniti voluptate sapiente dolorem. Voluptatem, distinctio illum excepturi inventore in ad eaque molestias quos doloremque, quaerat nesciunt numquam laboriosam repellendus, beatae maiores eveniet reiciendis placeat aliquam saepe. Quis hic iste accusamus quas dolor nisi ut eligendi quod nobis molestiae, facere tempora labore eveniet placeat, nihil officiis voluptas nostrum, dolorem doloremque corporis ad. Minus quibusdam minima, voluptatem, pariatur ut labore dolores ratione est, odit non atque. Magni, quas doloribus? Non officiis quasi magnam dolorem.
    </div>
</body>
</html>

二、元素浮动后的特点

🤢脱离文档流。
😊不管浮动前是什么元素，浮动后：默认宽与高都是被内容撑开（尽可能小），而且可以设置宽
高。
😊不会独占一行，可以与其他元素共用一行。
😊不会 margin 合并，也不会 margin 塌陷，能够完美的设置四个方向的 margin 和 padding 。
😊不会像行内块一样被当做文本处理（没有行内块的空白问题）。

效果/代码

在这里插入图片描述

三、浮动小示列

设置一个外边的大盒子，里面装三个div元素，进行操作这些元素，验证浮动后的5个特点

元素基本结构以及样式

.outer {
       width: 600px;
       border: 1px solid black;
     }

     .box {
        width: 100px;
        height: 100px;
        background-color: pink;
        border: 1px solid black;
        margin: 10px;
     }

<div class="outer">
       <div class="box box1">1</div>
       <div class="box box2">2</div>
       <div class="box box3">3</div>
   </div>

3.1 盒子1右浮动

效果
代码
```
 .box1 {
       float: right;
     }
```

3.2 盒子1左浮动

盒子2跑到盒子1的底部去了，将文字甩出来了，重叠到盒子3了，实际上是盒子1浮动起来了

效果
代码
```
 .box1 {
       float: left;
     }
```

3.3 所有的盒子都浮动

将1~3元素全部浮动起来，变成行内块元素

效果
代码
```
.box {
       float: left;
     }
```

3.4 盒子3落下来

所有盒子浮动后，盒子3落下来，实际上就是把盒子变大一些 ,大于父容器的宽度，最终就会落下来，将高度也撑开了

效果

代码

  .box {
        width: 200px;
        height: 200px;
        float: left;
     }

3.5 盒子3 落到右边了

所有的盒子都浮动，盒子3 卡到右边了,原理是将盒子1 的高度调整，宽度调整，当盒子3落下来的时候，盒子1下边高度不够，自然就挤到右边去了

效果

代码

.box {
       float: left;
       width: 200px;
     }
     .box1 {
        height: 130px;
     }

四、浮动出现的问题

我们设置3个元素，将元素分别浮动起来，然后在元素后面增加内容，可以看到浮动会影响到后面元素显示，而且父元素的高度不见了

父容器没有高度

浮动后面的元素顶到前面了

问题截图

五、处理浮动的影响

对兄弟元素的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟
无影响。
对父元素的影响：不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元
素。
1. 方案一：给父元素指定高度。
2. 方案二：给父元素也设置浮动，带来其他影响。
3. 方案三：给父元素设置 overflow:hidden 。
4. 方案四：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置 clear:both 。
5. 方案五：给浮动元素的父元素，设置伪元素，通过伪元素清除浮动，原理与方案四相同

页面结构

  <style>
     .outer {
       width: 500px;
       background-color: gray;
       border: 1px solid black;
     }
     .box {
       width: 100px;
       height: 100px;
       border: 1px solid black;
       background-color: pink;
       margin: 10px;
     }


     .box1,.box2,.box3 {
       float: left;
     }

  </style>
</head>
<body>
   <div class="outer">
      <div class="box box1">1</div>
      <div class="box box2">2</div>
      <div class="box box3">3</div>
      <!-- <div class="box box4">4</div> -->
   </div>
   <div style="background-color: gold;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam rerum illum alias, mollitia blanditiis ducimus, excepturi ipsam ab itaque eius vel dignissimos officia possimus eligendi expedita qui iure optio atque, amet ipsum quis omnis quasi! Veniam iste fugit, ipsa nostrum aut blanditiis quaerat repellat architecto ullam obcaecati magnam dolorem natus itaque vitae illo expedita eligendi corporis? Explicabo consequatur aut eius ab quod autem perspiciatis enim necessitatibus alias velit corrupti dolore nam temporibus cum quis rerum aliquid officiis, sunt maxime quibusdam soluta esse beatae est minus. Fuga, blanditiis cumque! Quae itaque autem nulla magni nesciunt! Rem ipsam, doloribus fugiat vitae deserunt quos, velit at assumenda delectus error laudantium nobis officia voluptatum mollitia. Ullam expedita corrupti aliquid tempore doloribus consequuntur repellat. Architecto, repellendus. Facere molestias in voluptatibus, incidunt, cupiditate veniam ipsam autem totam voluptates temporibus dolore dignissimos rerum dicta ullam iste exercitationem placeat qui officiis! Eius laudantium fugiat molestiae eveniet distinctio, aliquid soluta tempore. Impedit optio maxime ullam voluptas labore molestiae harum nam totam, facilis fugit reprehenderit laborum illum nihil ratione eos soluta excepturi cum ab modi eaque est debitis? Dignissimos nesciunt nemo accusamus aliquid repellendus sed eaque totam culpa aut aspernatur quae architecto veritatis quia perferendis sapiente amet, nostrum minima autem!</div>
</body>

方案1

撑起父元素高度，给父元素增加高度

代码

 .outer {
       width: 500px;
       background-color: gray;
       border: 1px solid black;
       /* 方案1 给父元素增加高度 */
       height: 200px;
     }

效果

初步看起来是解决了，并且后面的元素也不影响，但是如果我们给div3后面增加元素，这个时候就出现问题了；3后面的元素顶到1元素的下边了。

方案2

我们给父元素也设置浮动，这样就撑起来整个父容器的高度了；

带来的问题更严重了，不管后面的父元素的兄弟影响到了，而且3后面的兄弟元素也影响到了

代码

.outer {

width: 500px;

background-color: gray;

border: 1px solid black;

/* 方案1 给父元素增加高度 */

/* height: 150px; */

/* 方案二给父元素设置浮动 */

float: left;

}
效果

方案3

给父元素设置 overflow:hidden 。

代码

.outer {

width: 500px;

background-color: gray;

border: 1px solid black;

/* 方案1 给父元素增加高度 */

/* height: 150px; */

/* 方案二给父元素设置浮动 */

/* float: left; */

/* 方案三有点万能的意味 */

overflow: hidden;

}
效果
总结
看样子是不是貌似觉得这是不是解决了，好像还行，但是有一个更严重的问题，如果在3的后面增加了一个元素4，这个时候4直接都看不到了，4如果是一个正常的元素，没有设置浮动，这个时候直接看不到了
- 使用场景：元素全部浮动可以使用

方案4

在浮动的元素后面增加一个块级元素，如div，不要写内容，然后设置清楚浮动的操作

代码

/* 方案4 设置清浮动操作 */

.box4 {

/* both 为清楚 left 和 right */

clear: both;

}
效果
总结
看效果增加了一个空的div后，然后设置清除浮动，貌似都可以了，后面再增加元素好像也正常了，值得注意的是，如果你将设置的这个元素也浮动后，会造成严重的后果
- 实用场景：被设置清浮动的元素不能自身是浮动的，需要是一个正常的元素
错误演示，清浮动的元素也浮动起来了，且父元素高度也没了

方案5

利用伪元素，给最后一个浮动的元素增加一个content，然后设置块元素，最后清理元素

代码

/* 方案五伪元素 */

.outer::after {

content: ‘’;

display: block;

clear: both;

}
效果
总结
看效果是实现了，如果这个时候在3后面增加一个正常的元素，那么又会出现问题
- 实用场景：元素都是浮动的，不能一个是浮动，一个为正常元素

总结

看了上面5中方案，也没有哪一种是完全能解决的，实际上很多都是规范问题，所以针对此案例做了一个规避总结；

布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。

六、浮动布局练习

利用浮动布局一个小案例，案例是结合尚硅谷老师讲解的基础练习的

效果图

在这里插入图片描述

具体标注参数

在这里插入图片描述

代码实现

<title>布局小练习</title>
  <style>
     * {
       margin: 0;
       padding: 0;
     }

    /* 公共样式 开始*/
    .leftfix {
       float: left;
    }
    .rightfix {
       float: right;
    }
    .clearfix::after {
       content: '';
       display: block;
       clear: both;
    }
   /* 公共样式 结束*/
    .container {
       width: 960px;
       margin: 0 auto;
       text-align: center;
    }

    .logo {
       width: 200px;
    }

    .banner1 {
       width: 540px;
       margin:0 10px;
    }

    .banner2 {
       width: 200px;
    }

    .logo,.banner1,.banner2 {
       background-color: #ccc;
       height: 80px;
       line-height: 80px;
    }

    .menu {
      height: 30px;
      background-color: #ccc;
      margin: 10px 0;
    }

    .item1,.item2 {
       width: 368px;
       height: 198px;
       border: 1px solid black;
       line-height: 198px;
       margin-right: 10px;
    }

    .botton-item {
       width: 178px;
       height: 198px;
       border: 1px solid black;
       margin-right: 10px;
       margin-top: 10px;
       line-height: 198px;
    }

    .right-item {
      width: 198px;
      height: 128px;
      border: 1px solid black;
      line-height: 128px;
    }

    .right-item:nth-of-type(2) {
      margin: 10px 0;
    }

    .footer {
       height: 60px;
       background-color: #ccc;
       margin-top: 10px;
       line-height: 60px;
    }

  </style>
</head>
<body>
   <div class="container">
      <!-- 头部 -->
      <div class="header clearfix">
          <div class="logo leftfix">logo</div>
          <div class="banner1 leftfix">banner1</div>
          <div class="banner2 leftfix">banner2</div>
      </div>
      <!-- 菜单部分 -->
      <div class="menu">菜单</div>
      <!-- 中间内容部分 -->
      <div class="content clearfix">
          <!-- 左边栏目部分 -->
         <div class="left leftfix">
              <!-- 上边部分 -->
              <div class="top clearfix">
                  <div class="item1 leftfix">栏目一</div>
                  <div class="item2 leftfix">栏目二</div>
              </div>
               <!-- 下边部分 -->
              <div class="bottom clearfix">
                 <div class="botton-item leftfix">栏目三</div>
                 <div class="botton-item leftfix">栏目四</div>
                 <div class="botton-item leftfix">栏目五</div>
                 <div class="botton-item leftfix">栏目六</div>
              </div>
         </div>
         <div class="right leftfix">
            <div class="right-item">栏目七</div>
            <div class="right-item">栏目八</div>
            <div class="right-item">栏目九</div>
         </div>
      </div>

      <div class="footer">
        页脚
      </div>
   </div>
</body>

七、浮动相关属性总结

CSS 属性	功能	属性值
float	设置浮动	left : 设置左浮动 right : 设置右浮动 none ：不浮动，默认值
clear	清除浮动清除前面兄弟元素浮动元素的响应	left ：清除前面左浮动的影响 right ：清除前面右浮动的影响 both ：清除前面左右浮动的影响

css基础之浮动相关学习

一、浮动基本介绍

效果/代码

二、元素浮动后的特点

效果/代码

三、浮动小示列

元素基本结构以及样式

3.1 盒子1右浮动

3.2 盒子1左浮动

3.3 所有的盒子都浮动

3.4 盒子3落下来

3.5 盒子3 落到右边了

四、浮动出现的问题

五、处理浮动的影响

方案1

方案2

方案3

方案4

方案5

总结

六、浮动布局练习

效果图

具体标注参数

代码实现

七、浮动相关属性总结

网站公告

今日签到

热门文章

最新发布