浮动布局和定位布局的进阶

小小潘不放弃

已于 2022-03-07 20:37:56 修改

阅读量555

点赞数

分类专栏： CSS进阶文章标签： css css3 html web开发前端

于 2022-03-01 15:09:36 首次发布

本文链接：https://blog.csdn.net/qq_57220516/article/details/123204625

版权

CSS进阶专栏收录该内容

10 篇文章 0 订阅

订阅专栏

正常文档流与脱离文档流

正常文档流：将一个页面从上到下分行，块元素独占一行，行内元素在每一行中从左至右排列，直到该行布满。是默认情况下页面元素的布局情况。
脱离文档流：就是改变正常文档流，一般使用浮动或者定位来改变。

浮动布局

浮动布局的影响

浮动带来的影响我们从四个方面来分析

对自身的影响

自身会变成块元素，可以设置四个方向的margin。

对父元素的影响

如果父元素没有设置浮动，并且父元素没有设置高度或者高度小于子元素的话，就会造成父元素高度坍塌。
举例：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.father{
		width:200px;
		background-color: #1E90FF;
		border:2px solid red;
	}
	.son1{
		width:80px;
		height:50px;
		background-color: antiquewhite;
		float: left;
	}
	.son2{
		float:left;
		width:80px;
		height:50px;
		background-color: yellowgreen;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>
 </body>
</html>

在这里插入图片描述

对兄弟元素的影响

如果兄弟是浮动元素时，就是上个例子的情况。
如果兄弟元素不是浮动元素的话，设置了浮动的元素会覆盖没有设置浮动的兄弟元素，举例

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.father{
		width:160px;
		height:120px;
		background-color: #1E90FF;
		border:2px solid red;
	}
	.son1{
		width:40px;
		height:80px;
		background-color: antiquewhite;
		float: left;
	}
	.son2{
		width:80px;
		height:40px;
		background-color: yellowgreen;
	}
	.son3{
		width:80px;
		height:50px;
		background-color: grey;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<div class="son1">son1</div>
		<div class="son2">son2</div>
		<div class="son3">son3</div>
	</div>
 </body>
</html>

在这里插入图片描述
我们可以看到，son1覆盖了son2和son3，但是文字并没有被覆盖。

对子元素的影响

如果子元素也浮动的话，会有自适应的效果。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
  .father,.son1,.son2,.son3{
	  float:left;
  }
	.father{
		width:200px;
		background-color: #1E90FF;
		border:2px solid red;
	}
	.son1{
		width:40px;
		height:80px;
		background-color: antiquewhite;
	}
	.son2{
		width:80px;
		height:40px;
		background-color: yellowgreen;
	}
	.son3{
		width:80px;
		height:50px;
		background-color: grey;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<div class="son1">son1</div>
		<div class="son2">son2</div>
		<div class="son3">son3</div>
	</div>
 </body>
</html>

在这里插入图片描述
这里我们并没有对父元素设置高度，它自适应了子元素中最大的高度。
注意与父元素高度坍塌区分：父元素没有设置高度或者高度小于子元素（子元素浮动）的高度时，会产生高度坍塌，而当父元素和子元素都设置了浮动时，会产生如上所述的自适应效果。

浮动的副作用

高度坍塌：对父元素的影响
页面布局错乱：对没有设置兄弟元素的影响

清除浮动

常见的方法有三种

clear：both

clear不是应用于元素本身，而是浮动元素后面的元素，清除的是兄弟元素的浮动影响。就拿父元素高度坍塌的例子来讲，加上清除浮动：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.father{
		width:200px;
		background-color: #1E90FF;
		border:2px solid red;
	}
	.son1{
		width:80px;
		height:50px;
		background-color: antiquewhite;
		float: left;
	}
	.son2{
		float:left;
		width:80px;
		height:50px;
		background-color: yellowgreen;
	}
	/* 清除浮动 */
	.clear_float{
		clear:both;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<div class="son1"></div>
		<div class="son2"></div>
		<div class="clear_float"></div>
	</div>
 </body>
</html>

在这里插入图片描述
这样就解决了高度坍塌的问题。缺点是增加了多的标签，破坏了HTML的语义。

overflow：hidden

作用于浮动元素的父元素，注意不是浮动元素本身。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.father{
		width:200px;
		background-color: #1E90FF;
		border:2px solid red;
		overflow:hidden;
	}
	.son1{
		width:80px;
		height:50px;
		background-color: antiquewhite;
		float: left;
	}
	.son2{
		float:left;
		width:80px;
		height:50px;
		background-color: yellowgreen;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>
 </body>
</html>

在这里插入图片描述
比起clear，这种方法并没有破坏语义，并且也没有新增标签，但是隐藏溢出部分有时候并不是我们想要的结果。
其实也就是触发了BFC机制，该专栏后期文章会详细介绍BFC。

::after伪元素

实际案例里最好的解决办法是伪元素结合clear使用。

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

我们经常把它定义成一个公共样式，后期只需调用即可。

定位布局

关于定位布局需要注意的几点：
1 默认情况下，固定定位和绝对定位是相对于body而言的，而相对定位是相对于该元素本应该处的位置而言的。
2 position一般配合top，bottom，leftright使用，也只有在定义position属性（static）除外，这四个方向才有意义。
3 position：absolute和浮动一样，也会将元素转化为块元素。

子元素相对父元素定位

前面说过，默认情况下，绝对定位是相对于浏览器而言的，那子元素相对父元素定位怎么办呢？其实很简单，父元素是一个包含块，父元素设置相对定位而子元素设置绝对定位，再配合top，bottom，left和right中的两个来定位。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style type="text/css">
	.father{
		width:200px;
		height:40px;
		background-color: #1E90FF;
		position:relative;
	}
	.son{
		position: absolute;
		width:40px;
		height:40px;
		background-color: yellowgreen;
		bottom:-40px;
		left:80px;
	}
  </style>
 </head>
 <body>
	<div class="father">
		<div class="son"></div>
	</div>
 </body>
</html>