前端CSS基础10（浮动）
- 浮动
- 元素浮动后的特点
- 浮动后的特点
- 浮动后的影响及解决
- 浮动布局小练习
浮动
CSS中的浮动是一种布局技术，常用于实现元素的排列和定位。通过使用float属性，可以让元素在页面中左浮动或右浮动，使得其他内容围绕该元素布局。
在 CSS 中，可以使用 float 属性来使元素浮动。浮动的元素会脱离正常文档流，可以向左或向右移动，并尽可能靠近其相邻的浮动元素。
float 属性的常见取值包括：
left：元素向左浮动。right：元素向右浮动。none：默认值
元素浮动后的特点
浮动前：如以下代码，2号浮动前
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outer{
width: 400px;
height: 400px;
background-color:aqua;
padding: 10px;
}
.box{
font-size: 20px;
padding: 10px;
}
.box1{
background-color:yellow;
}
.box2{
background-color:antiquewhite;
/* float: left;*/
}
.box3{
background-color:blue;
}
span{
background-color: brown;
font-size: 40px;
vertical-align: middle;
}
img{
height: 200px;
float: left;
margin-right: 0.5em;
}
.text::first-letter{
font-size: 80px;
float: left;
}
</style>
</head>
<body>
<div class="outer">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
</div>
</body>
</html>
浮动2后：
浮动3后
浮动后的特点
CSS 元素浮动后具有以下特点：
- 脱离文档流：浮动元素会脱离正常文档流，不再占据原本的空间，而是向左或向右移动，允许其他内容环绕在其周围。（浮空）
- **元素重叠：**浮动元素会尽可能靠近相邻的浮动元素，导致元素重叠。这通常会影响页面布局，需要通过清除浮动或其他方法来处理重叠的情况。
- 不会独占一行，可以与其他元素共用一行。
- **高度塌陷：**父元素的高度可能因为子元素浮动而无法被正常撑开，造成高度塌陷的问题。可以使用清除浮动的技术解决这个问题。
- **文本环绕：**浮动元素可以使文本环绕在其周围，创造出独特的设计效果。
- 浮动清除：为了避免浮动元素导致的布局问题，通常会使用清除浮动技术，包括清除浮动的伪元素、clear 属性等方法。
- 不管浮动前是什么元素，浮动后，默认宽和高都是被内容撑开（尽可能小），而且可以设置宽和高。
- 可以正常的设置四个方向的margin和padding。
浮动后的影响及解决
影响：
- 对兄弟的影响：后面的兄弟元素，会占据浮动元素之前的位置，在浮动元素的下面；对前面的兄弟无影响。
- 对父元素的影响：不能撑起来父元素的高度，导致父元素高度塌陷；但是父元素的宽度依然束缚浮动的元素。
解决方案：
-
方案一：在所有浮动元素的最后面，添加一个块级元素，并给该块级元素设置
clear:both; -
方案二：给浮动的父元素，设置伪元素，通过伪元素清除浮动，如下：（推荐使用）
.clearfix::after{
content: '';
display: block;
clear: both;
}
clear 属性用于指定元素哪些方向的浮动元素是不允许靠近的。它只会对前面有浮动元素的元素生效。
以下是 clear 属性的属性值及功能：
clear: left;： 表示元素的左侧不允许存在浮动元素。如果左侧有浮动元素，这个元素将被清除浮动，并显示在浮动元素下方。
clear: right;： 表示元素的右侧不允许存在浮动元素。如果右侧有浮动元素，这个元素将被清除浮动，并显示在浮动元素下方。
clear: both;： 表示元素两侧都不允许存在浮动元素。即使左右两侧都有浮动元素，这个元素也会被清除浮动，并显示在所有浮动元素下方。
clear: none;： 默认值，表示元素两侧都可以存在浮动元素，不会清除任何浮动
布局中的一个原则：设置浮动的时候，兄弟元素要么全都浮动，要么全都不浮动。
浮动布局小练习
- 块元素共用一行就是浮动，不浮动的块元素就是独占一行。
- 块元素本来就是独占一行，想让几个块元素并行则用到浮动。
- 每用到浮动，就在父元素使用浮动消除，浮动消除代码如下：使用以下代码，只需要在使用浮动元素的父类元素加上一个class="clearfix"的类就行。
.clearfix::after{
content: '';
display: block;
clear: both;
}
写布局的代码，写代码前先分好块
块里面套块
块块并排（多块占用一行）用浮动，一个块单独占一行不用浮动。记得父元素的浮动消除
实现代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0px;
padding: 0px;
}
.leftfix{
float: left;
}
.rightfix{
float: right;
}
.clearfix::after{
content: '';
display: block;
clear: both;
}
.container{
width:960px;
margin:0 auto;
text-align: center;
}
.loge{
width:200px;
}
.banner1{
width:540px;
margin:0px 10px;
}
.banner2{
width:200px;
}
.loge,.banner1,.banner2{
height: 80px;
background-color: #ccc;
line-height: 80px;
}
.menu{
height: 30px;
background-color: #ccc;
margin-top: 10px;
line-height: 30px;
}
.item1,.item2{
width: 368px;
height: 198px;
border: 1px solid #ccc;
line-height:198px;
margin-right: 10px;
}
.content{
margin-top:10px;
}
.item3,.item4,.item5,.item6{
width: 178px;
height: 198px;
border: 1px solid #ccc;
margin-right: 10px;
line-height: 198px;
}
.bottom{
margin-top: 10px;
}
.item7,.item8,.item9{
width: 188px;
height: 128px;
border: 1px solid #ccc;
}
.item7,.item8{
margin-bottom: 10px;
}
.foot{
width: 960px;
height: 60px;
background-color: #ccc;
margin-top: 10px;
line-height: 58px;
}
</style>
</head>
<body>
<!-- 整体 -->
<div class="container ">
<!-- 头部 -->
<div class="page-header clearfix">
<div class="loge leftfix">loge</div>
<div class="banner1 leftfix">banner1</div>
<div class="banner2 leftfix">banner2</div>
</div>
<!-- 菜单 -->
<div class="menu">菜单</div>
<!-- 内容区 -->
<div class="content clearfix">
<!-- 内容区左 -->
<div class="left leftfix ">
<!-- 内容区上半部分 -->
<div class="top clearfix">
<div class="item1 leftfix">栏目一</div>
<div class="item2 leftfix">栏目二</div>
</div>
<!-- 内容区下半部分 -->
<div class="bottom clearfix">
<div class="item3 leftfix">栏目三</div>
<div class="item4 leftfix">栏目四</div>
<div class="item5 leftfix">栏目五</div>
<div class="item6 leftfix">栏目六</div>
</div>
</div>
<!-- 内容区右 -->
<div class="right rightfix">
<div class="item7">栏目七</div>
<div class="item8">栏目八</div>
<div class="item9">栏目九</div>
</div>
</div>
<!-- 页脚 -->
<div class="foot">页脚</div>
</div>
</body>
</html>
之前不太了解的点
*{
margin: 0px;
padding: 0px;
}
在CSS中，*{ margin: 0px; padding: 0px; }的作用是移除所有HTML元素的外边距（margin）和内边距（padding）。
外边距（margin）是指元素周围的空白区域，用于控制元素与其他元素之间的间距。而内边距（padding）是指元素内容与边框之间的空白区域，用于控制元素内部内容的间距。
通过将margin和padding都设置为0，可以消除所有元素的外边距和内边距，使页面布局更加紧凑。这在某些情况下可能是有用的，例如当你想要创建一个自定义的布局或者去除默认的浏览器样式时。
