css常见的布局⽅式
⽬录
1.浮动布局
1.1.float属性介绍
浮动布局利⽤float属性来实现。
float属性⽤于定位和格式化内容
float可设置以下值：
1.left - 元素浮动到其容器的左侧
2.right - 元素浮动在其容器的右侧
< - 元素不会浮动（将显⽰在⽂本中刚出现的位置）。默认
值。
4.inherit - 元素继承其⽗级的 float 值
注意：如果当元素为块级元素时且元素设置了浮动，其之后的兄弟元素也需要
设置浮动，否则设置浮动的元素会被未设置浮动的元素覆盖。之前的兄弟元素
未设置浮动，设了浮动的元素会新占⼀⾏。
1.2.清除浮动
使⽤clear属性清除浮动。
clear属性指定哪些元素可以浮动于被清除元素的旁边以及哪⼀侧
< - 允许两侧都有浮动元素。默认值
2.left - 左侧不允许浮动元素
3.right- 右侧不允许浮动元素
4.both - 左侧或右侧均不允许浮动元素
5.inherit - 元素继承其⽗级的 clear 值
注意：使⽤过float属性后才能清除浮动。
1.3.实列
1.使⽤浮动布局将两个盒⼦浮动。
代码：
.d1 {
float: left;
width: 100px;
height: 100px;
background-color: aqua;
}
.
d2 {
float: left;
width: 100px;
height: 100px;
background-color:chartreuse;        }
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
</body>
效果：
2.若其兄弟元素未设置浮动。
代码：
width: 100px;
height: 100px;
background-color: aqua;
}
.
d2 {
float: left;
width: 200px;
height: 200px;
background-color: chartreuse;        }
.d3 {
width: 300px;
height: 200px;
background-color: chocolate;        }
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
效果：
3.清除浮动。
代码：
float: left;
}
.d1 {
width: 100px;
height: 100px;
background-color: aqua;
}
.d2 {
clear:both;
width: 100px;
height: 100px;
background-color: chartreuse;
}
.d3 {
width: 100px;
height: 100px;
background-color: chocolate;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
效果：
2.定位布局
2.1position属性介绍
position属性规定应⽤于元素的定位⽅法的类型
position可设置以下值：
1.static（静态定位）元素不会以任何特殊⽅式定位；它始终根据页
⾯的正常流进⾏定位，也不受其他定位元素的影响。
定位的元素的 top、right、bottom 和 left 属性将偏离其原位置进
⾏调整，且其原位置不会被其他元素占⽤。
3.fixed（不动定位）的元素是相对于视⼝定位的，这意味着即使滚
动页⾯，它也始终位于同⼀位置。 top、right、bottom 和 left 属
性⽤于定位此元素。
4.absolute（绝对定位）将所定位元素从⽂档流⾥分离，相对其⽗元
素进⾏绝对定位，如果没有⽗元素则body为其⽗元素，并随着页⾯
滚动⼀起滚动。
5.sticky（滚动定位）粘性元素根据滚动位置在相对（relative）和
固定（fixed）之间切换。起先它会被相对定位，直到在视⼝中遇到
注意：1..若元素设置了position ：absolute； 想成为该元素的⽗元
给定的偏移位置为⽌ - 然后将其“粘贴”在适当的位置。css固定定位
素则也需要设置position：absolute；否则其⽗元素为body。
2.若元素设置了position ：absolute；其原位置也会被占⽤。
2.2 实例
1.使⽤相对定位
代码：
<style>
.d1 {
position: relative;
left: 50px;
top: 50px;
width: 100px;
height: 100px;
background-color: aqua;
}
.d2 {
width: 100px;
height: 100px;
background-color: chartreuse;
}
.d3 {
width: 100px;
height: 100px;
background-color: chocolate;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</body>
效果：可以发现b1进⾏相对定位后原位置未被占⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。