【前段基础入门之】=＞CSS浮动

在这里插入图片描述

浮动的简介

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

元素浮动后的特点

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

元素浮动后会有哪些影响

对兄弟元素的影响：

后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟元素无影响

对父元素的影响：

如果父元素未设置宽高，则不能撑起父元素的高度，导致父元素高度塌陷；但父元素的宽度依然束缚浮动的元素

解决浮动产生的影响（清除浮动）

方案一：给父元素指定高度,（只能解决父元素高度塌陷）。
方案二：给父元素也设置浮动，（只能解决父元素高度塌陷）。
方案三：给父元素设置 overflow:hidden，（只能解决父元素高度塌陷）。
方案四：在所有浮动元素的最后面，添加一个 块级 元素，并给该块级元素设置 clear:both 。
方案五：给浮动元素的父元素，设置一个伪元素，通过伪元素清除浮动，原理与方案四相同。===>( 推荐使用)

.parent::after {
	content: "";
	display: block;
	clear:both;
}
1
2
3
4
5

在这里插入图片描述

总结浮动属性

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

浮动布局小练习
在这里插入图片描述

附代码：

DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <link rel="stylesheet" href="./index.css">
head>

<body>

  <div class="box">
    <header>
      <div>logodiv>
      <div>banner1div>
      <div>banner2div>
    header>
    <div class="menu">菜单div>
    <article>
      <aside class="left">
        <div>
          <div>栏目一div>
          <div>栏目二div>
        div>
        <div>
          <div>栏目三div>
          <div>栏目四div>
          <div>栏目五div>
          <div>栏目六div>
        div>
      aside>
      <aside class="right">
        <div>栏目七div>
        <div>栏目八div>
        <div>栏目九div>
      aside>

    article>
    <footer>页脚footer>
  div>

body>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

.box {
    width: 960px;
    margin: 0 auto;
}

.box>header {
    height: 80px;
    text-align: center;
    line-height: 80px;
}

.box>header>div:first-child {
    width: 200px;
    height: 100%;
    float: left;
    background-color: #ddd;
}

.box>header>div:nth-child(2) {
    width: 540px;
    height: 100%;
    float: left;
    margin: 0 0 0 10px;
    background-color: #ddd;
}

.box>header>div:nth-child(3) {
    width: 200px;
    height: 100%;
    float: right;
    background-color: #ddd;
}

.box>.menu {
    height: 30px;
    background-color: #ddd;
    text-align: center;
    line-height: 30px;
    margin: 10px 0;
}

article {
    height: 410px;
}

article>.left {
    width: 750px;
    float: left;
}

article>.left>:first-child {
    height: 198px;
    text-align: center;
    line-height: 200px;
}

article>.left>:first-child>div {
    height: 198px;
    border: 1px solid;
    width: 368px;
}

article>.left>:first-child>div:first-child {
    float: left;
    margin-right: 10px;
}

article>.left>:first-child>div:last-child {
    float: right;
}

article>.left>:last-child {
    width: 750px;
    float: left;
    text-align: center;
    line-height: 198px;
    margin-top: 10px;
}

article>.left>:last-child>div {
    border: 1px solid;
    float: left;
    height: 198px;
    width: 178px;
    margin-right: 10px;
}

article>.left>:last-child>div:last-child {
    margin: 0;
}

article>.right {
    width: 200px;
    float: right;
    text-align: center;
}

article>.right>div {
    border: 1px solid;
    height: 128px;
    line-height: 128px;
}

article>.right>div {
    margin: 0 0 10px 0;
}

footer {
    height: 60px;
    background-color: #ddd;
    text-align: center;
    line-height: 60px;
    margin-top: 10px;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114

🚵‍♂️ 博主座右铭：向阳而生，我还在路上！
——————————————————————————————
🚴博主想说：将持续性为社区输出自己的资源，同时也见证自己的进步！
——————————————————————————————
🤼‍♂️ 如果都看到这了，博主希望留下你的足迹！【📂收藏！👍点赞！✍️评论！】
——————————————————————————————

相关阅读:
微信小程序如何使用地球半径计算两组经纬度点之间的距离（自身位置与接口返回位置）【上】
linux安装sqoop
【机器学习300问】78、都有哪些神经网络的初始化参数方法？
计网学习笔记二 Link Layer Service
Vscode 如何创建java项目，并添加包
 东北大学《复合材料学》——关于组成复合材料的各部分的浸润性与相容性的探讨
 CSS中伪元素和伪类的区别和作用？
使用Java实现一个简单的贪吃蛇小游戏
 Servlet规范之注解与可插拔性
 多线程 Leetcode 打印零与奇偶数
原文地址：https://blog.csdn.net/qq_60961397/article/details/132574375