CSS浮动与定位详解-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_44142127/article/details/85203766

浮动

当一个元素设置了浮动以后，将会脱离文档流，然后向页面的左上或右上移。此时，它将不会在文档流中占据位置，文档流中的其他元素将自动上移。需要注意的是：

当浮动元素遇到父元素的边框时，会停止移动
浮动元素移动时，如果遇到了其他的浮动元素，也会停止移动
如果浮动元素的上边是一个没有浮动的块元素，则浮动元素不会超过该元素
浮动元素不会超过他上边的浮动的兄弟元素，最多一边齐
浮动元素产生了浮动流，而产生了bfc的元素和文本类属性(inline)的元素以及文本都可以看到浮动元素。

高度塌陷

父元素的高度，默认被子元素撑开，此时如果子元素设置浮动，则会导致其完全脱离文档流，子元素脱离文档流将无法撑开父元素，导致父元素的高度丢失，就是我们说的高度塌陷问题。父元素一旦高度塌陷，则它下边的元素会向上移动，导致整个页面的布局混乱。

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.box1{
    			border: 1px black solid;
    					}
    			.box2{
				width: 200px;
				height: 200px;
				background-color: red;
				float: left;
			           }
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>

可利用伪元素清除浮动。

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<style type="text/css">
    			.box1{
    			border: 1px black solid;
    					}
    			.box1::{
    			content:"";/*逻辑伪元素内容*/
    			clear:both;/*清楚浮动，只有块状元素能生效*/
    			display:block;
    			}
    			.box2{
				width: 200px;
				height: 200px;
				background-color: red;
				float: left;
			           }
		</style>
	</head>
	<body>
		<div class="box1">
			<div class="box2"></div>
		</div>

定位

绝对定位

当前元素的position属性设置为absolute时，则开启了元素的绝对定位
绝对定位的特点：
5. 绝对定位的元素会完全脱离文档流，以致原来文档中不包含绝对定位的元素。
6. 绝对定位的元素如果不设置偏移量，位置不会改变
7. 绝对定位的元素会相对于离它最近的开启了定位的祖先元素进行定位，如果所有的祖先元素都没有开启定位，则相对于浏览器的窗口进行定位，所以我们为一个元素开启绝对定位的同时，都会为它的父元素开启相对定位（即子绝父相）。
8. 绝对定位会提升元素的层级。
9. 绝对定位会改变元素的性质，内联元素变成块元素，块元素的宽度被子元素撑开

相对定位

当元素的position属性值设置为relative时，则开启了元素的相对定位
相对定位的特点：
10. 开启相对定位以后，如果不指定偏移量，元素位置不会发生任何变化
11. 相对定位的元素是相对于其自身在文档流中的位置进行定位的
12. 相对定位的元素不会脱离文档流
13. 相对定位会使元素提升一个层级（文档流中的元素 < 浮动元素 < 定位元素）
14. 相对定位不会改变元素的性质，块还是块，内联还是内联

完全定位

也是一种绝对定位，它是一种特殊的绝对定位，它的大部分特点都会绝对定位一致.
不同的是固定定位永远相对于浏览器的窗口进行定位，而且固定的定位的元素一旦定位，则会固定在浏览器窗口中不动，即使浏览器的滚动条滚动，它也不会移动。

BFC

两个经典bug的解决

margin垂直方向塌陷

当设置子元素的margin，父元素也具有与子元素相同的margin值，此时出现margin塌陷。

    <style type="text/css">
    div.box1{
    width: 200px;
    height: 200px;
    background: red;
    }
    div.box2{
    width: 100px;
    height: 100px;
    background: yellow;
    margin-top:50px;
    }
    </style>
    <div class="box1">
       <div class="box2"></div>
    </div>

效果如下：在这里插入图片描述
解决方法：

在父元素中设置顶部边框；(对原有格局有影响，不推荐使用)

div.box1{
border-top:1px solid black;
   }

开启父级的bfc属性，改变父子盒子中的渲染规则；
可通过以下几个方面开启bfc属性：
overflow：hidden；
inline：inline-block；
float：left\right;
position：absolute;
但以上每个属性的设置都会对原本样式造成额外影响，需选择使用。

margin合并

正常情况下元素之间区域不能共用，而当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

  <style type="text/css">
        div.box1{
        width: 100px;
        height: 100px;
        margin-bottom:100px;
        background: red;
        }
        div.box2{
        width: 100px;
        height: 100px;
        margin-top:100px;
        background: yellow;
        }
        </style>
        <div class="box1"></div>
        <div class="box2"></div>