CSS-float浮动和高度塌陷问题详解

置顶

王十四兄

已于 2023-01-01 14:55:16 修改

阅读量967

点赞数 2

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

于 2022-11-21 23:03:04 首次发布

本文链接：https://blog.csdn.net/weixin_64933233/article/details/127974453

版权

本文详细介绍了CSS中的浮动float属性，包括基本属性、环绕效果及内容撑开，接着深入讨论了高度塌陷问题及其解决方法，如开启元素的BFC、清除浮动、clearfix等技术，旨在帮助开发者理解并有效处理浮动带来的布局问题。

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

浮动float

1. float 基本属性

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      .box1 {
     
        width: 600px;
        height: 200px;
        background-color: red;
        float: left;
      }
      .box2 {
     
        width: 600px;
        height: 200px;
        background-color: yellow;
        float: left;
      }
      .box3 {
     
        width: 200px;
        height: 200px;
        background-color: green;
        float: right;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>
</html>

请添加图片描述

块元素在文档流中默认垂直排列，所以这三个 div 自上而依次排开
- 如果希望块元素在页面中水平排列，可以使块元素脱离文档流
使用 float 来使元素浮动，从而脱离文档流
可选值：
- none，默认值，元素默认在文档流中排列
- left，元素会立即脱离文档流，向页面的左侧浮动
- right，元素会立即脱离文档流，向页面的右侧浮动
当为一个元素设置浮动以后，（float 属性是一个非 none 的值），
- 元素会立即脱离文档流，元素脱离文档流后，他下边的元素会立即向上移动
- 元素浮动以后，会尽量向页面的左上或者是右上漂浮,
- 直到遇到父元素的边框或者其他浮动元素
  
  如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素
  浮动的元素不会超他上边的兄弟元素，最多最多一边齐

float: left;

2. 环绕的float

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
      * {
     
        margin: 0;
        padding: 0;
      }
      .box1 {
     
        width: 100px;
        height: 100px;
        background-color: #bfa;
        float: left;
      }

      .p1 {
     
        height: 200px;
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <p class="p1">
      在我的后园，可以看见墙外有两株树，一株是枣树，还有一株也是枣树。
      这上面的夜的天空，奇怪而高，我生平没有见过这样奇怪而高的天空。他仿佛要离开人间而去，使人们仰面不再看见。然而现在却非常之蓝，闪闪地〖目夹〗着几十个星星的眼，冷眼。他的口角上现出微笑，似乎自以为大有深意，而将繁霜洒在我的园里的野花上。
      我不知道那些花草真叫什么名字，人们叫他们什么名字。我记得有一种开过极细小的粉红花，现在还开着，但是更极细小了，她在冷的夜气中，瑟缩地做梦，梦见春的到来，梦见秋的到来，梦见瘦的诗人将眼泪擦在她最末的花瓣上，告诉她秋虽然来，冬虽然来，而此后接着还是春，胡蝶乱飞，蜜蜂都唱起春词来了。她于是一笑，虽然颜色冻得红惨惨地，仍然瑟缩着。
      枣树，他们简直落尽了叶子。先前，还有一两个孩子来打他们别人打剩的枣子，现在是一个也不剩了，连叶子也落尽了。他知道小粉红花的梦，秋后要有春；他也知道落叶的梦，春后还是秋。他简直落尽叶子，单剩干子，然而脱了当初满树是果实和叶子时候的弧形，欠伸得很舒服。但是，有几枝还低亚着，护定他从打枣的竿梢所得的皮伤，而最直最长的几枝，却已默默地铁似的直刺着奇怪而高的天空，使天空闪闪地鬼〖目夹〗眼；直刺着天空中圆满的月亮，使月亮窘得发白。
      鬼〖目夹〗眼的天空越加非常之蓝，不安了，仿佛想离去人间，避开枣树，只将月亮剩下。然而月亮也暗暗地躲到东边去了。而一无所有的干子，却仍然默默地铁似的直刺着奇怪而高的天空，一意要制他的死命，不管他各式各样地〖目夹〗着许多蛊惑的眼睛。
      哇的一声，夜游的恶鸟飞过了
    </p