float,position,clear,diplay,overflow属性

最新推荐文章于 2022-08-15 11:25:08 发布

山有木兮木有枝_雅俗共赏

最新推荐文章于 2022-08-15 11:25:08 发布

阅读量510

点赞数

文章标签： css3 css 前端

本文链接：https://blog.csdn.net/weixin_57727027/article/details/123289694

版权

通过给父元素设置 overflow 属性值为 hidden 或者 auto 来清除浮动。

示例：

<style>
		*{
			margin:0;
			padding:0;
		}
		.floats{
			width:100%;
			height: auto;
			background: #63757A;
			overflow: hidden;
		}
		p{
			width:30%;
			height: 50px;
			background: #39B4B5;
		}
		div p:nth-child(1){
			float: left;
		}
		div p:nth-child(2){
			float:right;
		}
		
	</style>
</head>
<!--通过设置overflow为hidden或者auto清除浮动-->
<body>
	<div class="floats">
	<p>你好，我靠左浮动</p>
	<p>你好，我靠右浮动</p>
	</div>
	<div>
	你好，我是第二排
	</div>
</body>

float浮动

我们讲盒模型的时候，提到了3大属性可以用来控制页面排版。

三大属性： position属性， display属性， float属性。

①position 属性控制页面上元素间的位置关系。

②display 属性控制页面元素是否显示none或者是堆叠block还是并排inline显示。

③float 属性提供控制方法。通过float这种控制方法，可以实现多栏布局，导航菜单等等。

float讲解-------float用途

在页面布局时，一般用float属性来实现多栏布局，导航菜单等等。

浮动(float)的三个属性值：left(左浮动), right(右浮动), none.

浮动原理

浮动的意思就是把元素从常规的文档流中拿出来，浮动的元素在脱离了常规的文档流之后原来紧跟其后的元素就会在空间允许的情况下，

向上提升到浮动元素平起平坐。

如果想要浮动元素紧跟的元素停留在原始的位置，不跟着浮动，就对该元素设置clear的属性值。

clear（清除浮动）的三个属性值：left（清除左侧浮动）,right（清除右侧浮动）, both

position定位（核心）

我们讲盒模型的时候，提到了3个属性可以用来控制页面排版。

三大属性：position属性，display属性，float属性。

①position 属性控制页面上元素间的位置关系。

②display 属性控制页面元素是否显示或者是堆叠还是并排显示。

③float 属性提供控制方法。通过float这种控制方法，可以实现多栏布局，导航菜单等等。

position属性是干嘛用的？怎么用？有哪些属性值？

①position属性控制页面上元素间的位置关系，也就是排版。

②怎么用？要知道怎么用就要先了解position的属性值。

③属性值：static（默认状态）、relative（相对定位）、absolute（绝对定位）、fixed（固定定位）。

⑴static：页面元素默认的定位。

⑵relative：relative相对定位，相对于自己现在的位置（默认的位置）进行定位。可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。

⑶absolute：absolute绝对定位。

可以用top,right,bottom,left.属性来改变它的位置。多数情况下用top和left就可以了。

想一想，我们的absolute绝对定位，它的定位点在哪里？

定位点：浏览器的左上角。能不能改变它的定位点？

答案是肯定的。

怎么改变？

这里就要用到前面我们学到的relative相对定位了。

用relative和absolute配合使用就能改变我们的定位点。

⑷fixed：fixed固定定位。可以用top,right,bottom,left.属性来改变它的位置。

多数情况下用top和left就可以了。

clear清除浮动

通过float浮动这种控制方法，可以实现多栏布局，导航栏等功能。

但是float不是万能的，她也有她的副作用。副作用是什么？

被设置了float的元素后面的元素，会在空间允许的情况下，向上提升到浮动元素平起平坐的位置。

如果我并不想紧跟在我后面的元素浮动，也就是让它自己停留在原来的位置上，不跟着浮动，那么我们就对该元素设置clear（清除浮动）

属性。

clear（清除浮动）的三个属性值：left（清除左侧浮动）,right,both。

display 属性规定元素应该生成的框的类型

display****属性值

none**：**隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间

inline**：**指定对象为内联元素。

block**：**指定对象为块元素。

list-item**：**指定对象为列表项目。

inline-block**：**指定对象为内联块元素。

table**：**指定对象作为块元素级的表格。类同于html标签

inline-table**：**指定对象作为内联元素级的表格。类同于html标签

table-caption**：**指定对象作为表格标题。类同于html标签

table-cell**：**指定对象作为表格单元格。类同于html标签

table-row**：**指定对象作为表格行。类同于html标签

table-row-group**：**指定对象作为表格行组。类同于html标签

table-column**：**指定对象作为表格列。类同于html标签

table-column-group**：**指定对象作为表格列组显示。类同于html标签

table-header-group**：**指定对象作为表格标题组。类同于html标签

table-footer-group**：**指定对象作为表格脚注组。类同于html标签

run-in**：**根据上下文决定对象是内联对象还是块级对象。（CSS3）

box**：**将对象作为弹性弹性盒显示。（弹性盒最老版本）（CSS3）

inline-box**：**将对象作为内联块级弹性弹性盒显示。（弹性盒最老版本）（CSS3）

flexbox**：**将对象作为弹性弹性盒显示。（弹性盒过渡版本）（CSS3）

inline-flexbox**：**将对象作为内联块级弹性弹性盒显示。（弹性盒过渡版本）（CSS3）

flex**：**将对象作为弹性弹性盒显示。（弹性盒最新版本）（CSS3）

inline-flex**：**将对象作为内联块级弹性弹性盒显示。（弹性盒最新版本）（CSS3）

eg：我们可以将指定的对象设置它的display属性，block属性为块元素，inline-block属性为内联块元素，inline属性为内联元素。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style>
		div,span{
			width:500px;
			height: 500px;
			/*line-height: 500px;*/
			background: #5DBFBB;
			text-align: center;
			margin-top: 10px;
			vertical-align: top;
		}
		.ys{
			display:none;
		}
		.kj{
			display:block;
		}
		.hk{
			display:inline-block;
		}
		.hn{
			display:inline;
		}
	</style>
</head>

<body>
	<div class="ys">
	我要隐身
	</div>
	<span class="kj">
	我要变成块级元素
	</span>
	<span class="hk">
	我要变成行块级元素
	</span>
	<div class="hk">
	我也要变成行块级元素
	</div>
	<div class="hn">
	我要变成行元素
	</div>
</body>
</html>