Web前端学习知识点总结（四）之display 和 float

Le`soleil

已于 2023-12-25 15:55:18 修改

阅读量905

点赞数

分类专栏： Web前端文章标签： html css html5 css3

于 2020-10-07 23:29:45 首次发布

本文链接：https://blog.csdn.net/weixin_45118229/article/details/108955711

版权

Web前端专栏收录该内容

20 篇文章 2 订阅

订阅专栏

系列文章目录

文章目录

系列文章目录
前言
一、display
二、float 浮动
三、面试题：display：inline-block和float 浮动的区别

前言

本文来总结一下display和float，两者为了页面的合理布局而设计的，当出现浮动或者因为标签的类型，导致页面的设计不均衡，时多使用display：inline 和清除浮动的一些基本方法。

一、display

1.1、页面的布局

一般是121中（中间布局有两个页面）和 131（中间布局有三个页面）
以前中间的部分使用table去完成。
目前主流实用div+css去制作
（1）用div去分块，用css去整体布局；
（2）不是只用div，也用header和section；
（3）p，ul，span，a，其他元素根据情况来使用；
（4）table不用做布局使用。

1.2、display的内的属性

块元素：bolck
行内元素：inline
块和行内元素：inline-block，可以让块元素排列在一排。
none：不显示

可以和hover 组成隐藏效果 a:hover+span(+选择紧邻的后面的那个兄弟)。

存在的问题1：会解析换行符号。
解决方案：在父控件使用font-size:0px，在子控件中去设置对应的font-size值。

随之而来会带来第二个问题，当控件内部字数不同时，会产生无法对齐的问题。
解决方案：使用vertical-align:top,对需要对其的每个部分的内部都需要进行添加。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>		
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			section{
				/*解决方案一：去掉两者之间的间距*/
				font-size: 0;
			}
			
			div{
				font-size: 10px;
				border: 1px solid red;
				width: 100px;
				height: 100px;
				/*缺点会有顶部对齐的问题*/
				display: inline-block;
				/*解决方案二：用这个来解决*/
				vertical-align: top;				
			}
			
			span{
				font-size: 20px;
				border: 1px solid red;
				width: 100px;
				height: 100px;
				display: inline-block;
				vertical-align: top;				
			}
			
		</style>				
	</head>
	<body>
		<section>
			<div>div asdasd</div>
			
			<span>span</span>
		</section>
	</body>
</html>

1.3、hover隐藏案例

实现当鼠标悬浮div时候，span的出现。
当两个标签在同一级的时候，多使用“+”进行连接的判断，当处于包含的关系时“>”的操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				border:1px solid red;
				width: 100px;
				height: 100px;
				display: inline-block;
			}
			div:hover+span{
				display: inline-block;
			}
			span{
				display: none;
				border:1px solid red;
				width: 100px;
				height: 100px;				
			}
			
		</style>
	</head>
	<body>
		<div>div</div>
		<span>span</span>
	</body>
</html>

二、float 浮动

在需要进行浮动的地方加语句，float的语句有none，left，right

2.1、浮动的本质

1.脱离文档流
2.层级提高
3.根据浮动方向，定于父元素的左上或右上
4.多个浮动按照流式布局依次排列

2.2、浮动的问题

问题：父控件保不住浮动，导致边框塌陷(影响父控件后面的元素

2.3、清除浮动

2.3.1、clear清除

在父控件的末尾添加一个块元素（在行内元素上没用，一般是div）。clear的元素，认为浮动的元素是标准文档流的效果。

clear:left/rigt
clear：both
缺点：需要添加div在要清除浮动的末尾，会有很多div的元素，产生标签冗余。

<style>
.clear{
	clear:both;
}
<style>
<body>
	要清除的段落
	<div class="clear"> 
<body>

2.3.2、height

给父控件添加height（前提是知道父亲到height的情况）

2.3.3、overflow

hidden 父控件重新计算（不适合下拉菜单）（用定位去做）。
补充：

			overflow 溢出的时候
			visible 显示
			hidden 隐藏
			scroll 添加滚动条
			auto 自动

2.3.4、after伪类（推荐）

.clear:after{
		content:"";
		clear:both;//必须是块元素才有用
		display:block;					
}

需要加浮动的地方，从最大类开始的往下加，都加成class="clear"属性，不会有标签的冗余。

2.4.清除浮动的案例

完成一下的效果（使用浮动）。
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			dl{
				border: 1px solid gray;
				/*overflow: hidden;*/
			}
			dl dt{
				font-weight: bold;
				padding: 10px 0px 10px 20px;
				font-size: 25px;
				font-family: "微软雅黑";
			}
			dl dd{
				/*border: 1px solid gray;*/
				width: 250px;
				float: left;
				margin: 10px;
				/*overflow: hidden;*/
			}
			dl dd div{
				border: 3px solid gainsboro;
				margin: 10px;
				padding: 5px;
				border-radius:10px;
				width: 90px;
				/*在div中设置浮动 边界就是内部元素的大小*/
				float: left;				
				/*overflow: hidden;*/
			}
			dl dd div img{
				vertical-align: middle;
				width:100%;
				border-radius:10px;
			}
			dl dd h4{
				font-weight: bold;
				margin: 14px 0px 10px 13px;
				float: left;
			}
			dl dd h4 a{
				text-decoration: none;
				color: cornflowerblue;
			}
			dl dd p{
				color: gray;
				font-weight: bold;
				font-family: "微软雅黑";
				margin: 0px 0px 2px 13px;
				width: 100px;
				float: left;
			}
			.clear:after{
				content: "";
				clear: both;
				display: block;
			}			
		</style>
	</head>
	<body>
		<dl class="clear">
			<dt>摄影社区热门小镇</dt>
			<dd>
				<div>
					<img src="img/微信图片_20201004151226.jpg"/>
				</div>
				<h4><a href="#">风景狙击手</a> </h4>
				<p>成员：35</p>
				<p>作品：276</p>				
			</dd>
			
			<dd >
				<div>
					<img src="img/微信图片_20201004151226.jpg"/>
				</div>
				<h4><a href="#">风景狙击手</a> </h4>
				<p>成员：35</p>
				<p>作品：276</p>
				
			</dd>
			<dd >
				<div>
					<img src="img/微信图片_20201004151226.jpg"/>
				</div>
				<h4><a href="#">风景狙击手</a> </h4>
				<p>成员：35</p>
				<p>作品：276</p>
				
			</dd>
			<dd >
				<div>
					<img src="img/微信图片_20201004151229.jpg"/>
				</div>
				<h4><a href="#">《卡帕》先锋</a> </h4>
				<p>成员：32</p>
				<p>作品：12321</p>
				
			</dd>
			
			<dd>
				<div>
					<img src="img/微信图片_20201004151229.jpg"/>
				</div>
				<h4><a href="#">《卡帕》先锋</a> </h4>
				<p>成员：32</p>
				<p>作品：12321</p>
				
			</dd>
			
			<dd>
				<div>
					<img src="img/微信图片_20201004151229.jpg"/>
				</div>
				<h4><a href="#">《卡帕》先锋</a> </h4>
				<p>成员：32</p>
				<p>作品：12321</p>				
			</dd>			
		</dl>		
	</body>
</html>