CSS之浮动

一直学习的程序员L

已于 2023-06-30 19:18:16 修改

阅读量302

点赞数

文章标签： css 前端 html

于 2023-06-30 15:03:19 首次发布

本文链接：https://blog.csdn.net/weixin_45604020/article/details/131463126

版权

文章介绍了网页布局中的两种重要技术——浮动和Flex布局。浮动主要特点是元素不再占用原文档流位置，可左右浮动，常用于创建多列布局。然而，浮动可能导致页面布局错乱，为此需要清除浮动，文中提到了clear:both、伪元素法和overflow:hidden等方法。另一方面，Flex布局提供更现代的解决方案，能更灵活地调整元素布局。

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

之前的文章有说到，现在的很多网页都不是按照默认的排列方式去布局网页，文档流已经不能满足网页布局详情。因此我们要使用更加高级的页面布局方式，常用的是浮动和flex布局。

一、浮动

在这里插入图片描述

浮动顾名思义就是浮起来，通俗的说就是盒子浮起来不占用原来的位置，浮在上方。

在这里插入图片描述

属性名：float
属性值：

属性值	解释
left	向左浮动
right	向右浮动

<style>
	.box{
         height: 300px;
         background-color: rgba(212, 232, 228, 0.74);
     }
	.box1{
         width: 300px;
         height: 300px;
         background-color: #fd6701;
         float: left;
     }
    .box2{
         width: 300px;
         height: 300px;
         background-color: #1479d6;
         float: right;
     }
</style>
<body>
	<div class="box">
	    <div class="box1"></div>
	    <div class="box2"></div>
	</div>
</body>

在这里插入图片描述

1.1 浮动特点

* 不占用原本的位置
* 顶对齐
* 一行显示，盒子之间没有空隙
* 具有行内块显示模式特点

1.2 浮动案例

在这里插入图片描述

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .box{
        width:1226px ;
        height: 628px;
        margin: 50px auto;
        /*background-color: rgb(48, 100, 187);*/
      }
      .left{
        width: 234px;
        height: 628px;
        background-color: rgba(86, 216, 248, 0.94);
        float: left;
      }
      .right{
        width: 978px;
        height: 628px;
        /*background-color: rgba(232, 88, 70, 0.49);*/
        float: right;
      }
      dd{
        width: 234px;
        height: 300px;
        background-color: rgb(253, 164, 2);
        float: left;
        margin-right: 14px;
        margin-bottom: 14px;
      }
      dd:nth-child(4){
        margin-right: 0;
      }
      dd:nth-child(8){
        margin-right: 0;
      }
    </style>
</head>
<body>
<div class="box">
  <div class="left"></div>
  <div class="right">
    <dl>
      <dd>1</dd>
      <dd>2</dd>
      <dd>3</dd>
      <dd>4</dd>
      <dd>5</dd>
      <dd>6</dd>
      <dd>7</dd>
      <dd>8</dd>
    </dl>
  </div>
</div>
</body>

二、浮动带来的影响

在这里插入图片描述

问题： 浮动有时候会导致页面布局错乱。
原因： 我们要知道一个前提就是设置浮动后的盒子不占用原来的位置。若此时父盒子没有能够撑开高度的元素或父盒子未设置高度时，下层的元素会跑到上层，最终导致页面布局混乱。
解决办法：清除浮动

在这里插入图片描述

三、清除浮动

有四种方法可以清除浮动，分别是clear：both、单伪元素法、双伪元素法、overflow：hidden。

3.1 clear：both

在有浮动问题的父元素的最后添加一个块级元素（div），并设置属性clear：both。缺点：打乱原本的代码结构，打乱结构不清晰。

在这里插入图片描述

3.2 单伪元素法

在父元素内添加一个类选择器，并在最后添加after伪元素

.clearfix::after{
    content:"";
    display: block;
    clear: both;
}

在这里插入图片描述

3.3 双伪元素法

在父元素内添加一个类选择器，在开头加before伪元素，在结尾加after伪元素 这段代码还可以解决外边距塌陷问题

在这里插入图片描述

/* before 解决外边距塌陷问题 */
/* 双伪元素法 */
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
/* after 清除浮动 */
.clearfix::after {
clear: both;
}