普通流定位,又称为文档流定位,是页面元素的默认定位方式 页面中的块级元素:按照从上到下的方式逐个排列 页面中的行内元素:按照从左到右的方式逐个排列 但是如何让多个块级元素在一行内显示? 这里就引出了浮动定位
float属性 取值为 left/right
脱离文档流
元素会相对于它原来的位置偏移某个距离,改变元素位置后,元素原本的空间依然会被保留 语法 属性:position 取值:relative 配合着 偏移属性(top/right/bottom/left)实现位置的改变
如果元素被设置为绝对定位的话,将具备以下几个特征 1、脱离文档流-不占据页面空间 2、通过偏移属性固定元素位置 3、相对于 最近的已定位的祖先元素实现位置固定 4、如果没有已定位祖先元素,那么就相对于最初的包含块(body,html)去实现位置的固定 语法 属性:position 取值:absolute 配合着 偏移属性(top/right/bottom/left)实现位置的固定
将元素固定在页面的某个位置处,不会随着滚动条而发生位置移动 语法 属性:position 取值:fixed 配合着 偏移属性(top/right/bottom/left)实现位置的固定
在文档流中,父元素的大小会被子元素撑开。
<style type="text/css">
.a{
border: 5px solid blue;
}
.b{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
<body>
<div class="a">
<div class="b"></div>
</div>
</body>
如图:
如果给子元素设置浮动,就会脱离文档流,导致高度塌陷。
因此下面的元素也会随之上移。
BFC(Block formatting context)直译为”块级格式化上下文”。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。通俗一点讲,可以把 BFC 理解为一个封闭的大箱子,容器里面的子元素不会影响到外面的元素,反之也如此。
当元素出发BFC后会具有如下特点:
开启BFC后,元素不会被浮动元素覆盖。
元素垂直外边距不会传递给父元素。
<style type="text/css">
.cube{
width: 100px;
height:100px;
background-color: black;
margin: 100px;
}
</style>
<body>
<div class="cube"></div>
<div class="cube"></div>
</body>
margin理应有200px,实际上只有100px。
块的上外边距margin-top和下外边距margin-bottom会合并为单个边距,大小为单个边距的最大值
<style type="text/css">
.cube{
width: 100px;
height:100px;
background-color: black;
margin: 100px;
}
.container{
overflow: hidden;
}
</style>
<body>
<div class="container">
<div class="cube"></div></div>
<div class="cube"></div>
用overflow:hidden出发BFC即可解决。
开启BFC后,元素可以包含浮动的子元素
推荐方式:将overflow设置为hidden是副作用最小的开启BFC的方式。 display:flow-root;副作用较小,但是不兼容IE,看情况使用。
.clearfix::before,.clearfix::after{
content:'';
display:table;
clear:both;
}
此方法既能解决高度塌陷,又能解决子元素的margin传递给父元素的问题。