CSS浮动与布局：浮动元素、清除浮动与父级塌陷解决方案-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43988680/article/details/124584252

在 CSS 中，任何元素都可以浮动。

浮动元素会生成一个块级框，而不论它本身是何种元素。

一、示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动示例</title>
    <style>
        .d1 {
            height: 80px;
            width: 80px;
            background-color: tomato;
        }
        .d2 {
            height: 80px;
            width: 80px;
            background-color: steelblue;
        }

    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
</body>
</html>

在这里插入图片描述

如何将两个块级标签在一行中展示？

display : inline-block;

.d1 {
    height: 80px;
    width: 80px;
    background-color: tomato;
    display:inline-block;
}
.d2 {
    height: 80px;
    width: 80px;
    background-color: steelblue;
    display:inline-block;
}

在这里插入图片描述

但是在实际的页面布局中，很少使用display属性，而是采用float

left：向左浮动

right：向右浮动

none：默认值，不浮动

.d1 {
    height: 80px;
    width: 80px;
    background-color: tomato;
		float:left
}
.d2 {
    height: 80px;
    width: 80px;
    background-color: steelblue;
    float:left
}

在这里插入图片描述

二、浮动的特点

网页其实是一个三维的，网页的 z 轴是以屏幕起点指向人的

没有浮动的标签其实就相当于平铺在屏幕上，而浮动就是让平铺在 x,y 轴（屏幕）的标签，z 轴上处在屏幕和人中间的，不是贴在屏幕上的感觉

关于浮动的两个特点：

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

.d1 {
    height: 80px;
    width: 80px;
    background-color: tomato;
    /*float: left;*/
}
.d2 {
    height: 80px;
    width: 80px;
    background-color: steelblue;
    float: right;
}

在这里插入图片描述

`clear`属性

clear属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

注意：clear属性只会对自身起作用，而不会影响其他元素。

三、父标签塌陷问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮动示例</title>
    <style>
        body{
            border: 3px solid black;
        }
        .d1 {
            height: 80px;
            width: 80px;
            background-color: tomato;
            /*float: left;*/
        }
        .d2 {
            height: 80px;
            width: 80px;
            background-color: steelblue;
            /*float: left;*/
        }

    </style>
</head>
<body>
    <div class="d1"></div>
    <div class="d2"></div>
</body>
</html>

在这里插入图片描述

浮动后

.d1 {
  height: 80px;
  width: 80px;
  background-color: tomato;
  float: left;
}
.d2 {
  height: 80px;
  width: 80px;
  background-color: steelblue;
  float: left;
}

在这里插入图片描述

解决办法

主要有三种方式：

固定高度—每一个浮动的标签都新建一个空标签，大小对应（明显并不实用）
伪元素清除法—（最常用的方法）
overflow:hidden

伪元素清除法（使用较多）：

将课程塌陷的父标签加上 clearfix 属性（自定义什么名字都行）

原理就是利用clear属性

/*清理浮动的代码*/
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

四、导航栏实例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>li标签的float示例</title>
  <style>
    /*清除浏览器默认外边距和内填充*/
    * {
      margin: 0;
      padding: 0;
    }
    a {
      text-decoration: none; /*去除a标签默认的下划线*/
    }

    .nav {
      background-color: black;
      height: 40px;
      width: 100%;
      position: fixed;
      top: 0;
    }

    ul {
      list-style-type: none; /*删除列表默认的圆点样式*/
      margin: 0; /*删除列表默认的外边距*/
      padding: 0; /*删除列表默认的内填充*/
    }
    /*li元素向左浮动*/
    li {
      float: left;
    }

    li > a {
      display: block; /*让链接显示为块级标签*/
      padding: 0 15px; /*设置左右各15像素的填充*/
      color: #b0b0b0; /*设置字体颜色*/
      line-height: 40px; /*设置行高*/
    }
    /*鼠标移上去颜色变白*/
    li > a:hover {
      color: #fff;
    }

    /*清除浮动 解决父级塌陷问题*/
    .clearfix:after {
      content: "";
      display: block;
      clear: both;
    }
  </style>
</head>
<body>
<!-- 顶部导航栏 开始 -->
<div class="nav">
  <ul class="clearfix">
    <li><a href="">玉米商城</a></li>
    <li><a href="">MIUI</a></li>
    <li><a href="">ioT</a></li>
    <li><a href="">云服务</a></li>
    <li><a href="">水滴</a></li>
    <li><a href="">金融</a></li>
    <li><a href="">优品</a></li>
  </ul>
</div>
<!-- 顶部导航栏 结束 -->
</body>
</html>