Web前端基础 学习笔记
一、CCS 浮动
浮动,主要为了脱离文档流(垂直排列)
语法: 选择符 { float: left/right }
特点:
- .div 块元素失去“块状”换行显示特征,变为行内元素;
- 紧贴上一个浮动元素(同方向)或父级元素的边框,如宽度不够将换行显示
- 占据行内元素(文字段落)的空间,导致行内元素围绕显示
1.1、CSS 浮动属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CCS 浮动属性</title>
<style>
.box1{
width: 100px;
height: 100px;
background: red;
margin-bottom: 10px;
float: left;
}
.box2{
width: 200px;
height: 200px;
background: blue;
margin-bottom: 10px;
float: left;
}
.box3{
width: 300px;
height: 300px;
background: yellow;
margin-bottom: 10px;
float: right;
}
.box4{
width: 30px;
height: 30px;
background: black;
margin-bottom: 10px;
float: left;
}
hr{
clear: both; /* 清除浮动影响 */
}
</style>
</head>
<body>
<h3>一、CSS 浮动属性</h3><br>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div>浮动主要为了脱离文档流(垂直排列) 语法:float:left/right<br>特点:1.div块元素失去“块状”换行显示特征,变为行内元素<br>2.紧贴上一个浮动元素(同方向)或父级元素的边框,如宽度不够将换行显示<br>3.占据行内元素(文字段落)的空间,导致行内元素围绕显示</div>
<hr><br>
</body>
</html>
1.2、高度塌陷
- 父元素不设置高度,让子元素撑起来。子元素浮动之后,父元素没有高度了,则会导致 高度塌陷 。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CCS 浮动属性</title>
<style>
.d{
width: 800px; /* 不设高度 */
border: 5px solid;
}
.d1{
width: 300px;
height: 200px;
background: pink;
float: left; /* 注释该行观察效果 */
}
.d2{
width: 300px;
height: 200px;
background: yellow;
float: left; /* 注释该行观察效果 */
}
</style>
</head>
<body>
<h3>二、高度塌陷</h3>
<p>即:父元素不设置高度,由子元素的高度撑起来。子元素浮动之后,父元素没有高度了,则会导致高度塌陷.</p>
<div class="d">
<div class="d1">取消 float 注释再观察效果</div>
<div class="d2">解决方法:<br>1.父元素设置高度<br>2.给父元素添加overflow:hidden<br>3.在浮动元素下添加空div,并添加声明clear:both;<br>height:0;<br>overflow:hidden(或font-size:0;)</div>
<!-- <div class="d3"></div> -->
</div>
</body>
</html>
解决方法 1: 父元素设置高度
<head>
<style>
.d{
width: 800px;
border: 5px solid;
height: 300px;
}
</style>
</head>
- 观察效果,可行,但是固定高度, 灵活性差 —— 不推荐
解决方法 2: 给父元素添加 overflow: hidden;
溢出隐藏
<head>
<style>
.d{
width: 800px;
border: 5px solid;
overflow: hidden;
}
</style>
</head>
- 观察效果,可行,但溢出隐藏,也有一定伤害性 —— 不推荐
解决方法 3:
- 在浮动元素下添加空 div,并添加声明
clear:both; height:0; overflow:hidden (或font-size:0;)
实际上就是在最后添加一个空的 div 占位,因为它是透明的所以看不出来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CCS 浮动属性</title>
<style>
.d{
width: 800px; /* 不设高度 */
border: 5px solid;
}
.d1{
width: 300px;
height: 200px;
background: pink;
float: left;
}
.d2{
width: 300px;
height: 200px;
background: yellow;
float: left;
}
.d3{
clear: both;
height: 0;
font-size: 0;
}
</style>
</head>
<body>
<h3>二、高度塌陷</h3>
<p>即:父元素不设置高度,由子元素的高度撑起来。子元素浮动之后,父元素没有高度了,则会导致高度塌陷.</p>
<div class="d">
<div class="d1">取消 float 注释再观察效果</div>
<div class="d2">解决方法:<br>1.父元素设置高度<br>2.给父元素添加overflow:hidden<br>3.在浮动元素下添加空div,并添加声明clear:both;<br>height:0;<br>overflow:hidden(或font-size:0;)</div>
<div class="d3"></div>
</div>
</body>
</html>
- 观察效果,可行 —— 一般都是这么用