HTML5+CSS3学习笔记（四）
本系列更多文章，可以查看专栏 HTML+CSS学习笔记
文章目录
一、浮动（float）
使用浮动后，不再强制要求margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 父元素内容区的width，该等式必须成立
- left： 将元素向左浮动，脱离文档流
- right： 将元素向右浮动，脱离文档流
- none： 默认值，不浮动
- inherit： 继承父元素的float属性值
1. 浮动元素特点
- 浮动元素完全脱离文档流，不会再占据文档流的位置
- 浮动元素不会从父元素中移除
- 浮动元素向左或向右浮动时，不会超过前面的其它浮动元素
- 如果浮动上面是一个没有浮动的块元素，则浮动元素无法上移
- 浮动元素不会超过其上方浮动的兄弟元素，最多和兄弟元素一样高
- 浮动元素会盖住文字，文字会环绕在浮动元素周围
当子元素位于父元素中，父元素仅有border值，且子元素未使用浮动时，效果如下图所示：
若子元素使用浮动后，子元素与父元素的位置关系，效果如下图所示：
特点1： 浮动元素会脱离文档流
特点2： 浮动元素不会从父元素中移除
当两个兄弟元素位于父元素中，父元素仅有border值，且兄弟元素未使用浮动时，效果如下图所示：
若仅有绿色的元素使用向左浮动时，效果如下图所示：
若仅有黄色的元素使用向左浮动时，效果如下图所示：
**特点4：**如果浮动上面是一个没有浮动的块元素，则浮动元素无法上移
绿色和黄色元素均使用向左浮动时，效果如下图所示：
特点3： 浮动元素向左或向右浮动时，不会超过前面的其它浮动元素
特点5： 浮动元素不会超过其上方浮动的兄弟元素，最多和兄弟元素一样高
文字环绕浮动元素，效果如下图所示：
浮动练习代码，如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
.box1{
border: solid 5px red;
}
.box2{
width: 200px;
height: 200px;
background-color: #bfa;
float: left;
}
.box3{
width: 250px;
height: 250px;
background-color: yellow;
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
<div class="box3"></div>
hello
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit pariatur eveniet molestias minima, ullam obcaecati magnam amet voluptas molestiae possimus rerum enim tempore nemo at laborum labore quis voluptate ex.
Omnis est dolores commodi ullam tempora sequi asperiores ipsum autem ex aliquam. Voluptatibus unde, excepturi at perferendis incidunt ea eaque rerum autem? Aliquam corrupti suscipit, minima debitis et quas iusto!
Explicabo provident ipsam alias aliquam exercitationem, nulla voluptatum perferendis eum, tempora nobis eaque vel officiis aut at sapiente nisi itaque doloremque. Suscipit impedit necessitatibus praesentium soluta perspiciatis ad voluptate tenetur.
Sapiente tempora quibusdam consequuntur quam reiciendis ex nemo commodi, quaerat odit, et placeat cum illum minus totam possimus facilis eaque distinctio cumque! Numquam, ab. Ad saepe unde minima voluptatem necessitatibus!
Veritatis quaerat in tempora sapiente tempore, earum quibusdam. Facilis, provident nesciunt dolor, rem veniam atque illum in maxime, dolorum quae necessitatibus rerum voluptatibus incidunt cum veritatis. Iste vitae esse quidem.
</div>
</body>
</html>
2. 脱离文档流的元素特点
- 块级元素： 不独占页面一行，宽度和高度均由内容撑开
- 行内元素： 和块级元素一致
二、清除浮动（clear）
由于我们不希望某元素因为其它元素而移动，可以通过clear来清除浮动元素对其的影响
原理：通过为当前元素添加一个外边距，来控制当前元素不移动
- left： 清除左侧浮动元素对此元素的影响
- right： 清除右侧浮动元素对此元素的影响
- both： 清除两侧浮动元素中影响更大一侧的影响
三、实际问题
解决高度塌陷，练习代码如下所示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高度塌陷</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: gray;
padding-top: 20px;
}
.box1 {
border: solid 5px red;
/* 激活BFC方式一：设置浮动 */
/* float: left; */
/* 激活BFC方式二：设置行内块 */
/*display: inline-block;*/
/* 激活BFC方式三：设置overflow */
/*overflow: hidden;*/
}
.box2 {
width: 200px;
height: 200px;
background-color: #bfa;
/* 导致高度塌陷的原因 */
float: left;
}
/*
使用after伪元素解决高度塌陷
注：伪元素以::开头，且应该使用box1的结尾处添加内容
- 设置display，由于伪类本身是行内元素，content内容不设置block只会环绕浮动元素
- 设置clear，清除浮动元素的影响
*/
/*.box1::after {
content: '';
display: block;
clear: left;
}*/
/* 可以完美解决高度塌陷和外边距折叠 */
.clearfix::before,
.clearfix::after {
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
</body>
</html>
1. 高度塌陷之BFC
BFC（Block Fomatting Contexts，格式化上下文）
- CSS中元素的一种隐藏属性，不可以直接设置
- 可以使元素变成独立容器，容器内部的布局不会影响到容器外的元素
开启BFC的元素的特点：
- 1. 开启BFC元素会被浮动元素所覆盖
- 2. 开启BFC元素的子元素和父元素的外边距不会重叠
- 3. 开启BFC元素可以包含浮动的元素
- 还有其它特点…
如何开启元素的BFC特性？
- 设置元素的浮动，即float除none以外的值（不推荐）
- 设置元素为行内块元素，即display:inline-block（不推荐）
- 将元素的overflow设置为，除visible以外的值
- 设置display:flow-root（推荐）
- 还有其它方法……
高度塌陷如下图所示
BFC激活方式一：设置浮动 和 BFC激活方式二：设置行内块，解决后效果如下图所示：
BFC激活方式二：设置overflow，解决后效果如下图所示：
2. 高度塌陷之after伪元素
高度塌陷如下图所示：
使用after伪元素，解决后效果如下图所示：
3. 高度塌陷&外边距折叠之clearfix类
（1）单独解决外边距折叠
.clearfix::before {
content: '';
display: table;
}
（2）单独解决高度塌陷
.clearfix::after {
content: '';
display: block;
clear:both;
}
（3）可以完美解决高度塌陷和外边距折叠的类，使用时添加某元素的类为clearfix类即可
.clearfix::before,.clearfix::after {
content: '';
display: table;
clear: both;
}
四、练习代码
1. 导航条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航条</title>
<style>
/* 去除浏览器样式 */
*{
margin: 0;
padding: 0;
}
/* 设置导航栏 */
.nav {
/* 设置宽度和高度 */
width: 1210px;
height: 48px;
/* 设置导航栏水平居中 */
margin: 50px auto;
/* 设置导航栏背景色 */
background-color: #E8E7E3;
}
.nav li {
/* 设置列表项脱离文档流，有两种方式*/
float: left;
/*display: inline-block;*/
list-style-type: none;
height: 48px;
}
.nav li a {
/* 设置超链接字体大小、颜色 */
font-size: 18px;
color: #8C8C8B;
/* 去除超链接下划线 */
text-decoration: none;
/* 当line-height和height高度一致时，可以使文本垂居中 */
line-height: 48px;
/* display： inline-block时采用如下方式 */
/* padding： 0 37px */
/* float：left时采用如下方式 */
padding: 0 39px;
}
.nav li:hover {
color: #D4D3D0;
background-color: #3F3F3F;
}
/* 以下方式也可以不带a，但是与此同时上面的内边距也不能设置在超链接内部，设置的值也不同 */
.nav li:last-child a{
/* display： inline-block时采用如下方式 */
/*padding: 0 40px 0 40px;*/
/* float：left时采用如下方式 */
padding: 0 41px 0 42px;
}
</style>
</head>
<body>
<ul class="nav">
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">Browser Side</a></li>
<li><a href="#">Server Side</a></li>
<li><a href="#">Programming</a></li>
<li><a href="#">XML</a></li>
<li><a href="#">Web Building</a></li>
<li><a href="#">Reference</a></li>
</ul>
</body>
</html>
练习代码效果如下图所示：
结尾
如有错误，欢迎评论区指正。
更多其它知识可查询在线文档：[w3school在线教程链接](https://www.w3school.com.cn/)
扫一扫
7266
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
