pink老师HTML5+CSS3学习笔记 | DAY12_pink老师浮动学习-CSDN博客

本文链接：https://blog.csdn.net/m0_53454320/article/details/129734488

②特性2：如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并顶端对齐排列

②一个元素浮动了，理论上其余的兄弟元素也要浮动

1、浮动前言

①传统网页布局的方式

方式1：普通流（标准流/文档流）——标签按照规定好的默认方式排列；（前面学的都是标准流）
方式2：浮动
方式3：定位
以上三种方式都是用来摆放盒子的；
实际开发中一个页面基本包含了这三种布局方式；

②为什么用浮动？

很多布局效果标准流没法完成，而浮动可以改变元素标签的默认排列方式；
典型应用：浮动可以让块级元素一行内排列显示；
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动；

③什么是浮动？

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘；
语法：

float : none    /* 默认值，对象不浮动 */
float : left    /* 对象浮在左边 */
float : right    /* 对象浮在右边 */

2、浮动特性（重难点）

①特性1：浮动元素会脱离标准流（重点）

脱离标准普通流的控制(浮)移动到指定位置(动)，(俗称脱标)；浮动的盒子不再保留原先的位置；
应用：

/* css */
.div1 {
	background-color: pink;
	width: 100px;
	height: 100px;
	float: left;
}
.div2 {
	background-color: skyblue;
	width: 200px;
	height: 200px;
}
<!-- html -->
<div class="div1">1</div>
<div class="div2">2</div>

没加浮动前盒子1和盒子2应垂直排列放置，如下图所示；

给盒子1加浮动后，盒子1相当于飘浮了起来，原来盒子1的位置就空了出来且不再为盒子1保留，则被盒子2往前补上占领了，如下图所示；

②特性2：如果多个盒子都设置了浮动，则他们会按照属性值一行内显示并顶端对齐排列

浮动的元素是互相贴靠在一起的，没有缝隙，富国父级元素宽度装不下这些浮动的盒子，多出来的盒子会另起一行对齐；

③特性3：浮动元素会具有行内块元素特性

任何元素都可以浮动；不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性；
应用：

/* css */
.before {
	width: 200px;
	height: 200px;
	background-color: pink;
}
.after {
	width: 200px;
	height: 200px;
	background-color: pink;
	float: right;
}
<!-- html -->
<span class="before">span原本是行内元素</span>
<span class="after">加了浮动后就具备了行内块元素的特性，可以设置宽高</span>

④浮动元素经常和标准流父级搭配使用

一般采取策略：先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则；

3、常见网页模块

/* css */
* {
	margin: 0px;
	padding: 0px;
	list-style: none;
}

.top {
	width: 100%;
	height: 50px;
	background-color: #ced9e1;
}

.banner {
	width: 980px;
	height: 150px;
	background-color: #ced9e1;
	margin: 10px auto;
}

.box1 {
	height: 130px;
}

.box2 {
	height: 300px;
}

.box1,
.box2 {
	width: 980px;
	background-color: #fff;
	margin: 10px auto;
}

.box1 li {
	height: 130px;
}

.box2 li {
	height: 300px;
}

.box1 li,
.box2 li {
	width: 237px;
	background-color: #ced9e1;
	float: left;
	margin-right: 10px;
}

.box1 .last,
.box2 .last {
	margin-right: 0px;
}

.footer {
	width: 100%;
	height: 200px;
	background-color: #ced9e1;
}

<!-- html -->
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box1">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li class="last">4</li>
	</ul>
</div>
<div class="box2">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li class="last">4</li>
	</ul>
</div>
<div class="footer">footer</div>

4、浮动注意点

①浮动和标准流的父盒子搭配

先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置

②一个元素浮动了，理论上其余的兄弟元素也要浮动

一个盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流

5、清除浮动

①为什么清除浮动？

由于父级盒子很多情况下不方便给高度，但子盒子浮动又不占有位置，最后父级盒子高度为0时就会影响下面的标准盒子；

②清除浮动的本质

清除浮动的本质是清除浮动元素造成的影响
如果父盒子本身有高度，则不需要清除浮动
清除浮动之后，父级就会根据浮动的子盒子自动检测高度，父级有了高度，就不会影响下面的标准流了

③语法

clear : none    /* 默认值，允许两边都可以有浮动对象 */
clear : both    /* 不允许有浮动对象 */
clear : left    /* 不允许左边有浮动对象 */
clear : right    /*不允许右边有浮动对象 */

实际开发中几乎只用both；

④清除浮动方法

方法1：额外标签法也称为隔墙法，是W3C推荐的做法；
- 额外标签法会在浮动元素末尾添加一个空的标签。例如<div style="clear:both"></div>，或者其他标签(如<br>等);
- 优点:通俗易懂，书写方便;
- 缺点:添加许多无意义的标签，结构化较差;
- 注意:要求这个新的空标签必须是块级元素;
方法2：父级添加overflow属性;
- 给父级添加overflow 属性，将其属性值设置为hidden、auto 或 scroll;
- 优点:代码简洁;
- 缺点:无法显示溢出的部分;
方法3：父级添加after伪元素;
- 相当于给父级盒子内部的后面加了个盒子；
- 优点:没有增加标签，结构更简单；
- 缺点:照顾低版本浏览器；
- 代表网站:淘宝、京东等;
- :after 方式是额外标签法的升级版,也是给父元素添加(将以下代码复制到style标签内，并给父标签添加类名clearfix):

.clearfix:after {
	content : "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.clearfix{
	*zoom: 1;
}

方法4：父级添加双伪元素
- 相当于给父级盒子内部的前后都加了个盒子；
- 优点:代码更简洁;
- 缺点:照顾低版本浏览器;
- 代表网站:小米、腾讯等;
- 也是给父元素添加：

.clearfix:before,.clearfix:after{
    content: "";
	display: table;
}
.clearfix:after{
	clear: both;
}
.clearfix {
	*zoom: 1;
}