CCS 浮动

最新推荐文章于 2020-03-19 12:42:00 发布

白菜执笔人

最新推荐文章于 2020-03-19 12:42:00 发布

阅读量235

点赞数

分类专栏： Web 前端基础

本文链接：https://blog.csdn.net/qq_43621629/article/details/102651880

版权

Web 前端基础专栏收录该内容

15 篇文章 0 订阅

订阅专栏

Web前端基础学习笔记

一、CCS 浮动

浮动，主要为了脱离文档流(垂直排列)

语法： 选择符 { float: left/right }

特点：

.div 块元素失去“块状”换行显示特征，变为行内元素；
紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示
占据行内元素（文字段落）的空间，导致行内元素围绕显示

1.1、CSS 浮动属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CCS 浮动属性</title>
	<style>
		.box1{
			width: 100px;
			height: 100px;
			background: red;
			margin-bottom: 10px;
			float: left;
		}
		.box2{
			width: 200px;
			height: 200px;
			background: blue;
			margin-bottom: 10px;
			float: left;
		}
		.box3{
			width: 300px;
			height: 300px;
			background: yellow;
			margin-bottom: 10px;
			float: right;
		}
		.box4{
			width: 30px;
			height: 30px;
			background: black;
			margin-bottom: 10px;
			float: left;
		}

		hr{
			clear: both;									/* 清除浮动影响 */
		}
	</style>
</head>
<body>
	<h3>一、CSS 浮动属性</h3><br>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
	<div class="box4"></div>

	<div>浮动主要为了脱离文档流(垂直排列) 语法:float:left/right<br>特点：1.div块元素失去“块状”换行显示特征，变为行内元素<br>2.紧贴上一个浮动元素(同方向)或父级元素的边框，如宽度不够将换行显示<br>3.占据行内元素(文字段落)的空间，导致行内元素围绕显示</div>

	<hr><br>
</body>
</html>

1.2、高度塌陷

父元素不设置高度，让子元素撑起来。子元素浮动之后，父元素没有高度了，则会导致高度塌陷。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CCS 浮动属性</title>
	<style>	
		.d{
			width: 800px;									/* 不设高度 */
			border: 5px solid;
		}
		.d1{
			width: 300px;
			height: 200px;
			background: pink;
			float: left;									/* 注释该行观察效果 */
		}
		.d2{
			width: 300px;
			height: 200px;
			background: yellow;
			float: left;									/* 注释该行观察效果 */
		}
	</style>
</head>
<body>
	<h3>二、高度塌陷</h3>
	<p>即：父元素不设置高度，由子元素的高度撑起来。子元素浮动之后，父元素没有高度了，则会导致高度塌陷.</p>

	<div class="d">
		<div class="d1">取消 float 注释再观察效果</div>
		<div class="d2">解决方法：<br>1.父元素设置高度<br>2.给父元素添加overflow:hidden<br>3.在浮动元素下添加空div，并添加声明clear:both;<br>height:0;<br>overflow:hidden(或font-size:0;)</div>
		<!-- <div class="d3"></div> -->
	</div>
</body>
</html>

解决方法 1：父元素设置高度

<head>
	<style>	
		.d{
			width: 800px;
			border: 5px solid;
			height: 300px;
		}
	</style>
</head>

观察效果，可行，但是固定高度, 灵活性差 —— 不推荐

解决方法 2：给父元素添加 overflow: hidden; 溢出隐藏

<head>
	<style>	
		.d{
			width: 800px;
			border: 5px solid;
			overflow: hidden;
		}
	</style>
</head>

观察效果，可行，但溢出隐藏，也有一定伤害性 —— 不推荐

解决方法 3：

在浮动元素下添加空 div，并添加声明 clear:both; height:0; overflow:hidden (或font-size:0;)
实际上就是在最后添加一个空的 div 占位，因为它是透明的所以看不出来

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CCS 浮动属性</title>
	<style>	
		.d{
			width: 800px;									/* 不设高度 */
			border: 5px solid;
		}
		.d1{
			width: 300px;
			height: 200px;
			background: pink;
			float: left;
		}
		.d2{
			width: 300px;
			height: 200px;
			background: yellow;
			float: left;
		}
		.d3{							
			clear: both;
			height: 0;
			font-size: 0;
		}
	</style>
</head>
<body>
	<h3>二、高度塌陷</h3>
	<p>即：父元素不设置高度，由子元素的高度撑起来。子元素浮动之后，父元素没有高度了，则会导致高度塌陷.</p>

	<div class="d">
		<div class="d1">取消 float 注释再观察效果</div>
		<div class="d2">解决方法：<br>1.父元素设置高度<br>2.给父元素添加overflow:hidden<br>3.在浮动元素下添加空div，并添加声明clear:both;<br>height:0;<br>overflow:hidden(或font-size:0;)</div>
		<div class="d3"></div>
	</div>
</body>
</html>

观察效果，可行 —— 一般都是这么用

白菜执笔人

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CCS 浮动

Web前端基础学习笔记一、CCS 浮动  浮动，主要为了脱离文档流(垂直排列)  语法：选择符 { float: left/right }  特点：.div 块元素失去“块状”换行显示特征，变为行内元素；紧贴上一个浮动元素（同方向）或父级元素的边框，如宽度不够将换行显示占据行内元素（文字段落）的空间，导致行内元素围绕显...
复制链接

扫一扫