一、浮动 float
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。加了浮动会自动块化。
正常文档流在下,浮动在上时,会浮到正常文档流上方。
正常文档流在上,浮动在下时,浮动只能浮在正常文档流下一行 。
值 | 解释 |
---|---|
none | 默认,不浮动 |
left | 左浮动 |
right | 右浮动 |
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.box1{
float: right; /* 右浮动 */
width: 200px;
height: 200px;
background-color: #FF0000;
}
.box2{
float: left; /* 左浮动*/
width: 300px;
height: 300px;
background-color: #00f;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
效果:
二、清除浮动
1、浮动造成的影响
对于其父元素来说,元素浮动之后,它将脱离正常的文档流,所以它也无法撑开其父元素, 会造成其父元素高度的塌陷。下方另一个块内容会重叠到父元素上。
2、解决办法
(1)开启BFC
- 给父元素加overflow,overflow的值是除了visible以外的其他值,副作用最小,推荐使用。
- 给父元素加display:inline-block 或者dispaly值是table、table-cell、flex,但是会出现宽度缺失,下边可能会出现缝隙,无法居中等问题,一般不推荐使用。
- 给父元素加浮动,float的值bushinone的其他值,但是有副作用,不太推荐。
以上三种方式可以解决哪些问题:
- margin重叠问题
- 浮动带来的父元素高度坍塌问题
(2) 给父元素加height
(3)清除浮动
- 在所有有浮动的元素后加一个空元素div,给此空元素添加样式clear:both
clear:left 清除左浮动
clear:right 清除右浮动
clear:both 清除左、右浮动
- 给父元素添加伪元素,在此伪元素上清除浮动,在css中
.clearfix::after{
display:block;
content:"";(不能缺少,空的也要写)
clear:both;}
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.boxf {
background-color: grey;
width: 100%;
}
.box1 {
float: right;
width: 500px;
height: 800px;
background-color: aquamarine;
}
.box2 {
float: left;
width: 300px;
height: 600px;
background-color: pink;
}
.clearfix::after {
content: "";
clear: both;
display: block
/* 撑起父元素的高度 */
}
/* .box3{
clear:left 清除左浮动
clear:right 清除右浮动
clear:both
}清除左、右浮动 */
</style>
</head>
<body>
<div class="boxf clearfix">
<div class="box1"></div>
<div class="box2"></div>
<!-- <div class="box3"></div> -->
</div>
</body>
</html>
效果:
三、定位 position
1、定义:
CSS 为定位提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠。
定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。
2、position属性
- static
默认值,元素框正常生成。
.box1{
/* position: static; 默认*/
position: relative; /* 相对定位 相对于自己原来的位置 */
left: 500px;
top: 200px;
width: 200px;
height: 200px;
}
- relative 相对定位
相对定位 在“文档流”的基础上,结合left和top,top,bottom属性,相对于原来的自己定位,浮动之后原来位置会空出来,不会被其他元素占据。
.content{
position: relative;
width: 1000px;
height: 600px;
right: 0;
top: 0;
background-color: pink;
}
- absolute 绝对定位
包含框(父元素,只要是包着该元素的元素)无定位,该元素将相对于浏览器定位。
包含框有定位,则相对于离自己最近的有定位的元素定位。定位之后立刻脱离正常文档流,位置会被正常文档流占据一般父元素相对定位,子元素绝对定位绝对搭配使用的方式用的较多
.box1{
position: absolute; /* 绝对定位 */
/* 包含框无定位 相对浏览器定位 ,包含框有定位,则根据包含框定位*/
left: 0;
top: 0;
width: 200px;
height: 200px;
background-color: #f00;
}
- fixed 固定定位
元素框的表现类似于将 position 设置为 absolute,但是其始终相对于浏览器定位
.box1{
position: fixed; /*固定定位 */
/* 始终相对于浏览器定位 */
right: 0;
bottom: 0;
width: 200px;
height: 200px;
background-color: #f00;
}
- sticky 粘性定位
是position:relative与position:fixed结合,当在某个阈值时,是相对定位,超出某个阈值后,为固定定位
.box1{
position: sticky; /*粘性定位 */
/* 是 position:relative 与 position:fixed 的结合体 */
position: fixed;
top: 0px; /*当离顶部距离变为0时,将会黏住,不再随页面滚动*/
height: 100px;
}
定位堆叠顺序 z-index
- 堆叠顺序值越大,优先级越高 即值越大,堆叠越靠上
- 值可以为正 也可以为负。
- z-index只在定位的情况下才起作用