CSS--浮动

CSS–浮动

浮动的简单介绍❤️

什么是浮动？

顾名思义，浮动，就是让盒子“浮”起来，在页面上，有着更高的显示级。

随着web的发展，浮动已经成为网页上创建多列布局的最常用工具之一。

当你需要将几个div盒子摆在同一行时

你需要使用到浮动

当你需要将同一行盒子紧密相接时

你需要使用到浮动

当你需要将一个盒子叠在另一个盒子上

你需要使用到浮动

浮动的基本操作💻

选择器 {
	float:left     //被选择的盒子向左边的盒子对齐，如果左边没有，则向父元素的左侧对齐
	float:right	   //被选择的盒子向右边的盒子对齐，如果右边没有，则向父元素的右侧对齐
	float:none     //懒得动
}

浮动特性🔎

脱标

1.脱离标准普通流的控制（浮）移动到指定位置（动)，（俗称脱标）

2.浮动的盒子不再保留原先的位置

同一行显示

浮动的盒子会在同一行显示，如果父元素宽度不够，盒子就会另起一行

拥有行内块的特性

span盒子是无法设置高度宽度

当时当它被设为浮动时，可以去设置他的宽高了

浮动布局注意点😺

### 1.浮动和标准流的父盒子搭配
**先用标准流的父元素排列上下位置**，**之后再对内部子元素采取浮动排列左右位置**

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

一个父盒子里面有多个子盒子，如果其中一个盒子浮动了，那么其他兄弟也应该浮动，以防止引起问题

浮动的盒子只会影响浮动盒子后面的标准流不会影响前面的标准流

案例😊

在项目中，浮动的盒子通常会放在一个大的标准流盒子里

此时，在介绍几个经典的网页布局案例，供读者参考，获得灵感

一.

二.

三.

四.

这些案例中，在同一行水平排列的很有可能是放在一个大盒子里的浮动的小盒子

浮动在网页布局中，确实好用且重要

BUT🤔

它并非是没有缺点的吗

在项目中

我们常常会遇到

大盒子不能设置高度（因为可能咱们可能并不知道我们需要多高，设置后可能会遇到大盒子高度不够的情形）


而是需要里面的小盒子给大盒子撑大，从而得到高度适配

当一个标准流的盒子放在大盒子里，会撑开

但“浮”起来的盒子放在大盒子里，会撑开吗？

答案是否定的，通过页面的检查，我们会发现，大盒子的height=0了

这可不是我们要的结果

那我们应该怎样做呢？

这就要求我们去学习怎样去清除浮动

浮动的清除

简单介绍清除浮动

我们来进行一个比喻，父盒子就是房子，浮动盒子就是人，人浮到外面房子就关不下了，失去了人的维护，久而久之房子也变形了。

那我们现在对人进行约束，你可以浮，但是只能在屋子里面浮，这样盒子就不会变形了

清除浮动的基本语法

选择器 {
    <!--清除左侧浮动的影响-->
	clear: left;
    <!--清除右侧浮动的影响-->
	clear: right;
    <!--同时清除左右两侧浮动的影响（这是我们在项目中最常用到的）-->
	clear: both;
}

清除浮动的方法

额外标签法

<div style="clear:both">
    优点：通俗易懂
    缺点：结构性差
    且要求必须为块级元素
</div>

overflow清除法

选择器 {
	overflow: hidden;
    overflow: auto;
    overflow: scroll;
    <!--简单简洁，但是溢出部分无法显示-->
}

tip：这是给父级元素添加，而不是给浮动盒子添加

after清除法

 .clearfix::after {
 	 content: "";
     display:block;
     height: 0;
     clear: both;
     visibility: hidden;
     
 }
<!--这是最常用的清除浮动的方法-->

tip：这也是给父级元素添加

after-before清除法

.clearfix::after, .clearfix::before {
	 content: "";
     display:block;
     height: 0;
     clear: both;
     visibility: hidden;
}

清除浮动的总结

完结撒花🌸

通过这个网站可以来检测我们的学习成果

测试您的技能：浮动 - 学习Web开发|断续器 (mozilla.org)