13 float属性（重点）

流动布局

流动模型（Flow），即文档流，浏览器打开HTML网页时，从上往下，从左往右，逐一加载。

在正常情况下，HTML元素都会根据文档流来分布网页内容的。

文档流有2大特征：

① 块状元素会随着浏览器读取文档的顺序，自上而下垂直分布，一行一个的形式占据页面位置。

② 行内元素会随着浏览器区队文档的顺序，从左往右水平分布，一行多个的形式占据页面位置。行内元素摆放满一行以后才会到下一行继续排列。
当一个元素被设置浮动后，将具有以下特性：

1.任何申明为float 的元素都会自动被设置为一个行内块状元素，具有行内块状元素的特性。
2.假如某个元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。
3.在标准浏览器中如果浮动元素a脱离了文档流，那么排在浮动元素a后的元素将会往回排列占据浮动元素a本来所处的位置，使页面布局产生变化。
4.如果水平方向上没有足够的空间容纳浮动元素，则转向下一行。
5.字围效果：文字内容会围绕在浮动元素周围。
6.浮动元素只能浮动至左侧或者右侧。
7.浮动元素只能影响排在其后面元素的布局，却无法影响出现在浮动元素之前的元素。
浮动的背景
开始为了web工程师，在网页上实现一些简单的布局。如文字环绕图片现象
浮动的属性
- none：表示不浮动，默认值
- left：左浮动
- right：右浮动
- inherit：继承父元素的浮动属性

1 文件环绕效果

文字环绕图片，可设置图片的浮动。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>文字环绕</title>
	<link rel="stylesheet" type="text/css" href="CSS/reset.css">
	<style type="text/css">
		.box img{
			float: left;
		}
	</style>
</head>
<body>
	<div class="box">
		<img src="images/11.jpg" width="100">
		<p>在不到一个月之前，也就是今年的5月26号，美国总统拜登对外发布一份正式声明，宣称他已经下令要求美国的情报机构，对新冠疫情的起源展开调查分析，确认这种前所未见的新型病毒究竟是动物宿主感染还是来自于实验室事故，并且还要求美国情报机构提高调查力度，在90天之内形成报告并递交到白宫，而在声明的最后，拜登老调重弹的呼吁那些“志同道合的伙伴们”，一共“敦促”中国参与全面、透明、以证据为基础的国际调查。

		如今距离拜登给出的90天期限已经走完了近三分之一，美国的情报机构们依旧没有更多的收获，眼看着总统设定的最后期限正在逼近，因此美国外交系统开始就病毒溯源向中国下达了最后通牒，而且只给了我们两个选择：要么配合调查，要么被国际孤立。
		</p>
	</div>

</body>
</html>

2 浮动元素脱标

脱标：就是脱离了标准文档流

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动现象</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			color: #fff;
		}
		div.left{
			background-color: red;
			float: left;
		}
		div.right{
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="left">左边的盒子</div>
	<div class="right">右边的盒子</div>
</body>
</html>

效果：左边的盒子压盖住了右边的盒子

原因1：左边的盒子设置了浮动，右边的盒子没有设置浮动，左边的盒子脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为右边的盒子是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上。这种现象，也有一种叫法，浮动元素“飘起来了”，但我不建议大家这样叫。

原因2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高

3 浮动元素互相贴靠

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动现象</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			color: #fff;
		}
		div.left{
			background-color: red;
			float: left;
		}
		div.right{
			background-color: green;
			float: left;
		}
	</style>
</head>
<body>
	<div class="left">左边的盒子</div>
	<div class="right">右边的盒子</div>
</body>
</html>

效果：

如果父元素有足够的空间，那么右边的盒子紧靠着左边的盒子，左边的盒子靠着边。

如果没有足够的空间，那么就会靠着左边的盒子，如果再没有足够的空间靠着左边的盒子，自己往边靠

4 浮动元素的收缩

收缩：一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动现象</title>
	<style type="text/css">
		div{
			/*width: 200px;*/
			height: 200px;
			color: #fff;
		}
		div.left{
			background-color: red;
			float: left;
		}
		div.right{
			background-color: green;
			/*float: left;*/
		}
	</style>
</head>
<body>
	<div class="left">左边的盒子</div>
	<div class="right">右边的盒子</div>
</body>
</html>

注意：

关于浮动，我们初期一定要遵循一个原则，永远不是一个盒子单独浮动，要浮动就要一起浮动。另外，有浮动，一定要清除浮动。

5 清除浮动方式

浮动虽然能实现网页多列排版布局，但同样带来了父元素高度塌陷问题

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>浮动元素的破坏性</title>
	<style type="text/css">
            .top_bar{
                border: 1px solid red;
            }
		.child1{
			width: 200px;
			height: 200px;
			background-color: green;
			float: left;
		}
		.child2{
			width: 200px;
			height: 200px;
			background-color: orange;
			float: right;
		}
		.header{
			width: 100%;
			height: 100px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="top_bar">
		<div class="child1">儿子</div>
		<div class="child2">二儿子</div>
	</div>
	<div class="header">
		
	</div>

</body>
</html>

出现top_bar塌陷：

那么怎么解决呢？

方式一：

给父元素设置固定高度，可与子标签的高度对齐。

.top_bar{
    height: 200px
    border: 1px solid red;
}

缺点：使用不灵活，后期维护成本高。

优点：应用于网页中盒子固定高度的区域，比如固定的导航栏。

方式二（内墙法）：

规则：在最后一个浮动元素的后面加一个空的块级元素, 并且设置该属性clear: both;

有三个值：

left：当前元素左边不允许有浮动元素

right：当前元素右边不允许有浮动元素

both：当前元素左右两边不允许有浮动元素

none：默认值。允许浮动元素出现在两侧。

.clear{
    clear: both;
}

<body>
	<div class="top_bar">
		<div class="child1">儿子</div>
		<div class="child2">二儿子</div>
		<div class="clear"></div>
	</div>
		<div class="header">	
	</div>
</body>

缺点：结构冗余

方法三（伪元素清除-常用）：

.clearfix:after{             /*在类名为“clearfix”的元素内最后面加入内容*/
    /*必须要写以下这三个参数*/
    content: '.';            /*内容为“.”就是一个英文的句号而已。也可以不写。*/
    clear: both;             /*清除左右两边浮动。*/
    display: block;          /*加入的这个元素转换为块级元素。*/


    visibility: hidden;              /*可见度设为隐藏。注意它和display:none;是有区别的。*/
                                              /* visibility:hidden;仍然占据空间，只是看不到而已；*/
    line-height: 0;                  /*行高为0；*/
    height: 0;                       /*高度为0；*/
    font-size:0;                     /*字体大小为0；*/
}

<body>
	<div class="top_bar after">
		<div class="child1">儿子</div>
		<div class="child2">二儿子</div>
	</div>
		<div class="header">	
	</div>
</body>

<style type="text/css">
.top_bar{
    /*height: 200px;*/
    border: 1px solid red;
}
.child1{
    width: 200px;
    height: 200px;
    background-color: green;
    float: left;
}
.child2{
    width: 200px;
    height: 200px;
    background-color: orange;
    float: right;
}
.header{
    width: 100%;
    height: 100px;
    background-color: purple;
}
.clear{
    clear: both;
}
div::after{           /*在类名为“clearfix”的元素内最后面加入内容*/
    /*行内元素*/
    content: ".";     /*内容为“.”就是一个英文的句号而已。也可以不写。*/
    display: block;   /*加入的这个元素转换为块级元素。*/
    clear: both;      /*清除左右两边浮动。*/
}
</style>

方法四（overflow：hidden - 常用）：

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

overflow功能介绍

overflow: visible; /*默认文本超出盒子也显示*/
overflow: hidden;  /*超出部分隐藏 */
overflow: scroll;  /*超出部分隐藏且有滚动条可超看超出部分*/
overflow: auto;  /*自动，效果与scroll效果一样*/
overflow：inherit；  /*继承父集*/

<head>
	<meta charset="utf-8">
	<title>overflow</title>
	<style type="text/css">
		body{
			overflow: scroll;
		}
		.box{
			width: 300px;
			height: 300px;
			border: 1px solid red;
			overflow: visible; /*默认文本超出盒子也显示*/
			/*overflow: hidden;  超出部分隐藏
			overflow: scroll;  超出部分隐藏且有滚动条可超看超出部分
			overflow: auto;  自动，效果与scroll效果一样
			overflow：inherit；  继承父集
			*/
		}
	</style>
</head>

<body>
	<div class="box">
		在不到一个月之前，也就是今年的5月26号，美国总统拜登对外发布一份正式声明，宣称他已经下令要求美国的情报机构，对新冠疫情的起源展开调查分析，确认这种前所未见的新型病毒究竟是动物宿主感染还是来自于实验室事故，并且还要求美国情报机构提高调查力度，在90天之内形成报告并递交到白宫，而在声明的最后，拜登老调重弹的呼吁那些“志同道合的伙伴们”，一共“敦促”中国参与全面、透明、以证据为基础的国际调查。

		如今距离拜登给出的90天期限已经走完了近三分之一，美国的情报机构们依旧没有更多的收获，眼看着总统设定的最后期限正在逼近，因此美国外交系统开始就病毒溯源向中国下达了最后通牒，而且只给了我们两个选择：要么配合调查，要么被国际孤立。
	</div>
</body>

那么如何清除浮动：

BFC区域一条规则:计算BFC (块级盒子)的高度时,浮动元素也参与计算
形成BFC的条件:除了overflow:visitable的属性值
B1ock Formtting Context

	<style type="text/css">
		.top_bar{
			border: 1px solid red;
			overflow: hidden;
		}
		.child1{
			width: 200px;
			height: 200px;
			background-color: green;
			float: left;
		}
		.child2{
			width: 200px;
			height: 200px;
			background-color: orange;
			float: right;
		}
		.header{
			width: 100%;
			height: 100px;
			background-color: purple;
		}
		.clear{
			clear: both;
		}
	</style>

<body>
	<div class="top_bar">
		<div class="child1">儿子</div>
		<div class="child2">二儿子</div>
		<!-- <div class="clear"></div> -->
	</div>
		<div class="header">	
	</div>
</body>

posted @ 2022-08-04 17:59 角角边 Views(181) Comments(0) 收藏举报

刷新页面返回顶部

角角边