从 HTML 到 CSS：开启网页样式之旅（八）------ 解决浮动产生的影响与浮动例题
- 前言
- 一、浮动产生的问题及解决办法
-
- [1. 父元素高度塌陷问题](#1. 父元素高度塌陷问题)
-
- 解决方法一：给父元素设置固定高度
- [解决方法二：使用 `overflow: hidden`](#解决方法二：使用
overflow: hidden) - 解决方法三：添加空的清除元素
- [2. 元素重叠问题](#2. 元素重叠问题)
- 二、浮动例题
-
- [例题 1：三栏布局](#例题 1：三栏布局)
- [例题 2：图片文字环绕布局优化](#例题 2：图片文字环绕布局优化)
前言
- 在之前的博客中，我们深入学习了 CSS 浮动的相关知识，包括它的概念、特点以及一些基础的应用和练习。
- 然而，在实际使用浮动进行布局时，常常会产生一些意想不到的影响，比如父元素高度塌陷等问题。
- 今天，我们就来着重探讨如何解决这些由浮动产生的影响，并通过一些实际的例题来加深对浮动的理解和运用，进一步提升我们的网页布局能力。
我的个人主页，欢迎来阅读我的其他文章
https://blog.csdn.net/2402_83322742?spm=1011.2415.3001.5343我的HTML-CSS专栏
https://blog.csdn.net/2402_83322742/category_12834817.html?spm=1001.2014.3001.5482HTML-CSS-JavaScript综合大项目专栏
https://blog.csdn.net/2402_83322742/category_12880492.html?spm=1001.2014.3001.5482
一、浮动产生的问题及解决办法
1. 父元素高度塌陷问题
当子元素设置了浮动后，由于它们脱离了正常文档流，父元素会感知不到子元素的高度，从而导致父元素的高度塌陷，影响整个页面的布局。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float Problem</title>
<style>
.parent {
border: 1px solid black;
width: 300px;
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>在上述代码中，.child 元素设置了左浮动，导致 .parent 元素高度塌陷，显示效果中 .parent 的高度几乎为 0。
解决方法一：给父元素设置固定高度
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float Problem</title>
<style>
.parent {
border: 1px solid black;
width: 300px;
height: 100px; /* 给父元素设置固定高度 */
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>这种方法简单直接，但当子元素内容高度不确定时，可能会导致父元素高度设置不准确，影响布局美观。
解决方法二：使用 overflow: hidden
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float Problem</title>
<style>
.parent {
border: 1px solid black;
width: 300px;
overflow: hidden; /* 触发 BFC，解决高度塌陷问题 */
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>overflow: hidden 会触发块级格式化上下文（BFC），使得父元素能够包含浮动的子元素，从而解决高度塌陷问题。但如果子元素内容超出了父元素的范围，超出部分会被隐藏。
解决方法三：添加空的清除元素
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float Problem</title>
<style>
.parent {
border: 1px solid black;
width: 300px;
}
.child {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
}
.clear {
clear: both; /* 清除浮动 */
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="clear"></div> <!-- 添加空的清除元素 -->
</div>
</body>
</html>在父元素的最后添加一个空的元素，并设置 clear: both，可以清除浮动对父元素高度的影响，但会增加额外的 HTML 结构。
2. 元素重叠问题
当多个浮动元素的宽度之和超过父元素的宽度时，可能会导致元素重叠。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float Overlap</title>
<style>
.parent {
border: 1px solid black;
width: 300px;
}
.child {
float: left;
width: 200px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>上述代码中，两个 .child 元素的宽度之和为 400px，超过了父元素的 300px 宽度，导致第二个 .child 元素与第一个重叠。
解决方法：合理调整元素宽度
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float Overlap</title>
<style>
.parent {
border: 1px solid black;
width: 300px;
}
.child {
float: left;
width: 140px; /* 调整元素宽度，使它们能在一行显示 */
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
<div class="child"></div>
</div>
</body>
</html>通过合理计算和调整浮动元素的宽度，确保它们的总宽度不超过父元素的宽度，从而避免元素重叠问题。
二、浮动例题
例题 1：三栏布局
实现一个三栏布局，左右两栏宽度固定，中间栏自适应宽度。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Three Column Layout</title>
<style>
.left {
float: left;
width: 200px;
height: 300px;
background-color: lightcoral;
}
.right {
float: right;
width: 200px;
height: 300px;
background-color: lightgreen;
}
.middle {
margin: 0 210px; /* 留出左右两栏的宽度和间距 */
height: 300px;
background-color: lightblue;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="middle"></div>
</body>
</html>在这个布局中，.left 元素左浮动，.right 元素右浮动，.middle 元素通过设置左右 margin 来适应中间的宽度，实现了三栏布局。
例题 2：图片文字环绕布局优化
在之前的图片文字环绕布局基础上，添加一些样式优化，使布局更加美观。
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Text Wrap</title>
<style>
img {
float: left;
width: 150px;
height: 150px;
margin-right: 20px;
border-radius: 10px; /* 给图片添加圆角 */
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 添加阴影效果 */
}
p {
line-height: 1.6; /* 调整行高 */
font-size: 16px;
}
</style>
</head>
<body>
<img src="./TvzVABfVpn.jpg" alt="示例图片">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat, asperiores? Autem, molestiae. Nisi, ad!
Voluptate itaque facere molestiae ratione quibusdam, doloribus voluptas sit asperiores incidunt aliquid
architecto, ex praesentium beatae?</p>
</body>
</html>通过给图片添加圆角和阴影效果，以及调整文字的行高和字体大小，使图片文字环绕布局更加美观和舒适。
希望大家通过这篇博客，对 CSS 浮动有了更深入的认识，也期待大家在实践中不断探索和应用，提升自己的网页开发技能。
我的个人主页，欢迎来阅读我的其他文章
https://blog.csdn.net/2402_83322742?spm=1011.2415.3001.5343我的HTML-CSS专栏
https://blog.csdn.net/2402_83322742/category_12834817.html?spm=1001.2014.3001.5482HTML-CSS-JavaScript综合大项目专栏
https://blog.csdn.net/2402_83322742/category_12880492.html?spm=1001.2014.3001.5482
|--------------------|
| 非常感谢您的阅读，喜欢的话记得三连哦 |
