前端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>