CSS基础知识4

最新推荐文章于 2024-11-01 16:54:21 发布

搬砖搬到互联网

最新推荐文章于 2024-11-01 16:54:21 发布

阅读量55

点赞数 1

文章标签： css 前端 html5 html css3

本文链接：https://blog.csdn.net/m0_64204485/article/details/131903943

版权

本文详细介绍了CSS中的浮动概念，包括浮动的基本属性、特点和清除浮动的方法，如空元素、clearfix类和伪元素。接着讨论了两种经典的响应式布局技巧——圣杯布局和双飞翼布局，它们旨在实现内容区域优先加载、两侧固定宽度及中间自适应的效果。文章还提供了相应的HTML和CSS代码示例来展示这两种布局的实现方式。

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

续CSS基础知识3

文章目录

九丶浮动与清除浮动

九丶浮动与清除浮动

9.1 浮动的基本概念和属性

9.1.1 浮动的基本概念

浮动（float）是CSS中的一种定位方式，用于将元素从正常的文档流中脱离，并使其向左或向右浮动。
浮动的元素会尽量靠近容器的左侧或右侧，并且其他内容会围绕在其周围。

9.1.2 浮动的属性：

float：用于设置元素的浮动位置。可以设置为 left（左浮动）、right（右浮动）或 none（取消浮动，默认值）。
clear：用于控制浮动元素周围的其他元素如何排列。可以设置为 left、right、both（两侧都不允许浮动元素）或 none（默认值）。

9.1.3 浮动的特点：

浮动元素脱离了正常的文档流，导致其他元素可以环绕在其周围。
浮动元素的宽度默认会根据内容自动调整，但可以通过设置宽度来改变其大小。
浮动元素的高度默认会根据内容自动调整，但容器的高度不会自动适应浮动元素的高度。
浮动元素的父容器的高度可能会塌陷，需要使用清除浮动来解决。

9.1.4 清除浮动（Clearing Floats）：

当浮动元素和正常流中的其他元素重叠时，可能需要使用清除浮动来避免布局问题。
清除浮动可以通过在容器的末尾或下方使用 clear 属性来实现，以防止浮动的影响继续影响后续元素。
常见的清除浮动方法包括使用空的占位元素、添加 clear: both 的伪元素、使用 clearfix 类等。

9.2 清除浮动的几种方法

9.2.1 清除浮动的目的

浮动元素会脱离正常的文档流，导致其父容器无法正确计算高度，可能会导致容器塌陷或布局混乱。
清除浮动的目的是消除浮动元素对其他元素布局的影响，确保布局的稳定和一致性。

9.2.2清除浮动的常用方法

空的占位元素：可以在浮动元素后面添加一个空的 div 元素，并设置其样式为 clear: both;。这个空的元素会将其前面的浮动元素的影响清除掉。
- ```
.clearfix{
	clear: both;
}
```
使用 clearfix 类：可以在父容器上添加一个类，例如 .clearfix，并设置其样式为 overflow: auto; 或 overflow: hidden;。这样可以使父容器包含浮动元素并正确计算高度。
- ```
.clearfix{
	/* 会出现滚动条 */
    /* overflow: scroll; */
    overflow: scroll;
	/* 可能会出现滚动条 */
	/* overflow: auto; */
	overflow: hidden;
}
```
伪元素清除浮动：可以使用伪元素 :after 在父容器的末尾添加一个清除浮动的元素。例如：.clearfix::after { content: ""; display: table; clear: both; }。
- ```
.clearfix{
	/* 解决IE6-7 不认伪元素*/
	zoom: 1;
}
.clearfix:after{
	content: "";
	display: block;
	clear: both;
}
```
使用clearfix库：还有一些第三方的CSS库，例如Bootstrap，提供了清除浮动的类，可以直接应用于父容器上。

9.2.3 注意事项

清除浮动应该应用于浮动元素的父容器，以确保正确地清除浮动的影响。
清除浮动的方法应该与浮动元素的布局需求和所在的上下文相匹配。
清除浮动可能会引入一些副作用，如增加额外的空间或滚动条，因此需要根据实际情况选择合适的方法。

9.3 圣杯布局

在这里插入图片描述

需求：

圣杯布局：

  1. 内容区域优先加载
  1. 左右两侧固定宽度

  3. 中间内容部分自适应

做法以及思路：

首先要保证主体部分优先加载，因此需要给主体放在前面。
要保证主体部分自适应，则需要给宽度width:100%;
两侧给固定的宽度200px,并且都加上浮动,此时两边全部换行了,主体在第一行。
次数需要把两侧的内容左侧的放左边，右侧的放右边，左边给margin-left:-100%;右边给margin-left:200px;
左侧盖住了主体的内容,因此需要给整体的容器加一个padding: 0 200px;
此时只需要左边往左移右边往右移动就可以解决。（通过相对定位，相对自身进行移动）
又因为自适应如果内容小于200px，左右两侧会掉下去，因此给内容一个最小宽度200px。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        .wrap{
            height: 500px;
            background: pink;
            padding: 0 200px;
            /* 最小宽度 */
            min-width: 200px;
        }
        .wrap div{
            height: 500px;
            float: left;
        }
        .main{
            width: 100%;
            background: lightsalmon;
        }
        .left{
            width: 200px;
            background: red;
            margin-left: -100%;
            position: relative;
            left: -200px;
        } 
        .right{
            width: 200px;
            background: greenyellow;
            margin-left: -200px;
            position: relative;
            left: 200px;
        }
    </style>
</head>
<body>
    <!-- 
        圣杯布局：
           1. 内容区域优先加载
           2. 左右两侧固定宽度
           3. 中间内容部分自适应
     -->
     <!-- 
        思路：
            1. 首先要保证主体部分优先加载，因此需要给主体放在前面。
            2. 要保证主体部分自适应，则需要给宽度width:100%;
            3. 两侧给固定的宽度200px,并且都加上浮动,此时两边全部换行了,主体在第一行。
            4. 次数需要把两侧的内容左侧的放左边，右侧的放右边，左边给margin-left:-100%;右边给margin-left:200px;
            5. 左侧盖住了主体的内容,因此需要给整体的容器加一个padding: 0 200px;
            6. 此时只需要左边往左移右边往右移动就可以解决。（通过相对定位，相对自身进行移动）
            7. 又因为自适应如果内容小于200px，左右两侧会掉下去，因此给内容一个最小宽度200px。
      -->
     <div class="wrap">
        <div class="main">主体主体主体主体主体主体主体主体主体主体主体主体主体</div>
        <div class="left">左边左边左边左边左边左边左边左边左边</div>
        <div class="right">右边右边右边右边右边右边右边右边右边</div>
    </div>
</body>
</html>

9.4 双飞翼布局

在这里插入图片描述

需求：

双飞翼布局：（与圣杯布局区别不大，知识实现方法不同）

     1. 内容区域优先加载
     2. 左右两侧固定宽度

     3. 中间内容部分自适应

做法以及思路：

首先要保证主体部分优先加载，因此需要给主体放在前面。
要保证主体部分自适应，则需要给宽度width:100%;
两侧给固定的宽度200px,并且都加上浮动,此时两边全部换行了,主体在第一行。
次数需要把两侧的内容左侧的放左边，右侧的放右边，左边给margin-left:-100%;右边给margin-left:200px;
左侧盖住了主体的内容,给主体部分再套一层div，给里面的div设置一个margin: 0 200px;background: orange;将main上的背景颜色放在内部div上。（这种方式就不需要设置定位了）
又因为自适应如果内容小于200px，左右两侧就会挤进去，因此给内容一个最小宽度200px。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
        }
        .wrap{
            height: 500px;
            background: pink;
            min-width: 200px;
        }
        .wrap>div{
            float: left;
        }
        .main{
            width: 100%;
            height: 500px;
        }
        .left{
            width: 200px;
            height: 500px;
            background: plum;
            margin-left: -100%;
        }
        .right{
            width: 200px;
            height: 500px;
            background: yellow;
            margin-left: -200px;
        }
        .inner{
            height: 100%;
            margin: 0 200px;
            background: orange;
        }
    </style>
</head>
<body>
    <!-- 
        淘宝UED团队
        双飞翼布局
            左翼 left 设置200px，右翼 right设置200px，身体main 自适应
        1.html代码中，main要放在最前边，然后是left right；
        2.将main left right都float：left；
        3.将main占满 width：100%；
        4.此时main占满了，所以要把left拉倒最左边，使用margin-left：-100% 同理right 使用margin-left：-200px；
        5.给main增加一个内层div----inner，然后margin：0 200px；
     -->
    <div class="wrap">
        <div class="main">
            <div class="inner">111内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>