Day21浮动

news/2025/11/15 23:26:05/文章来源:https://www.cnblogs.com/bingzhuo/p/19223651

1.浮动的基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮动的基本使用</title><style>/* 特点:顶对齐，具备行内块显示模式，即可以在同一行一起显示 */.one{width: 100px;height: 100px;background-color: red;float: left;}.two{width: 200px;height: 200px;background-color: orange;/* float: left; *//* float: right; *//* 此时由于只有.one进行了浮动，而浮动会导致该标签脱标 *//* 即浏览器不在会识别他为标签，后面的标签可能会抢占原本浮动标签的位置 *//* 导致标签重叠错乱 */}</style>
</head>
<body><div class="one"></div><div class="two"></div>
</body>
</html>

2.产品区域布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>产品区域</title><style>*{margin: 0;padding: 0;}li{list-style: none;}.product{margin: 50px auto;width: 1226px;height: 628px;background-color: pink;}.left{float: left;width: 234px;height: 628px;background-color: skyblue;}.right{float: right;width: 978px;height: 628px;background-color: brown;}.right li{float: left;margin-right: 14px;margin-bottom: 14px;width: 234px;height: 300px;background-color: orange;}/* 第四个和第八个li去掉右边的margin */.right li:nth-child(4n){margin-right: 0;}/* 如果父级的宽度不够，即使加上了浮动，浮动的标签也可能因为位置不够而被挤到下一行 */</style>
</head>
<body><div class="product"><div class="left"></div><div class="right"><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>
</body>
</html>

3.清除浮动异常

原理就是标签添加浮动属性之后会导致脱标，即浏览器不在为该标签安排位置，所以下一个标签会挤占浮动标签的位置，造成页面异常
例如：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>清除浮动异常</title><style>.top{margin: 10px auto;width: 1200px;/* 注释掉父级的高度，子集无法撑开父级高度,会导致页面错乱 *//* height: 300px; */background-color: pink;}.right{float: left;width: 200px;height: 300px;background-color: skyblue;}.left{float: right;width: 950px;height: 300px;background-color: orange;}.bottom{height: 100px;background-color: brown;}</style>
</head>
<body><div class="top"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>
</body>
</html>

解决浮动异常的四种方法

额外标签法,在出现异常的标签的基础上再添加一个标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>额外标签法</title><style>.top{margin: 10px auto;width: 1200px;/* 注释掉父级的高度，子集无法撑开父级高度,会导致页面错乱 *//* height: 300px; */background-color: pink;}.right{float: left;width: 200px;height: 300px;background-color: skyblue;}.left{float: right;width: 950px;height: 300px;background-color: orange;}.bottom{height: 100px;background-color: brown;}.clearfix{clear: both;}</style>
</head>
<body><div class="top"><div class="left"></div><div class="right"></div><div class="clearfix"></div></div><div class="bottom"></div>
</body>
</html>

单伪元素法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>单伪元素法</title><style>.top{margin: 10px auto;width: 1200px;/* 注释掉父级的高度，子集无法撑开父级高度,会导致页面错乱 *//* height: 300px; */background-color: pink;}.right{float: left;width: 200px;height: 300px;background-color: skyblue;}.left{float: right;width: 950px;height: 300px;background-color: orange;}.bottom{height: 100px;background-color: brown;}.clearfix::after{content: "";display: block;clear: both;}</style>
</head>
<body><div class="top clearfix"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>
</body>
</html>

双伪元素法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>双伪元素法</title><style>.top{margin: 10px auto;width: 1200px;/* 注释掉父级的高度，子集无法撑开父级高度,会导致页面错乱 *//* height: 300px; */background-color: pink;}.right{float: left;width: 200px;height: 300px;background-color: skyblue;}.left{float: right;width: 950px;height: 300px;background-color: orange;}.bottom{height: 100px;background-color: brown;}.clearfix::before,.clearfix::after {content: "";display: table;}.clearfix::after {clear: both;}</style>
</head>
<body><div class="top clearfix"><div class="left"></div><div class="right"></div></div><div class="bottom"></div>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/966575.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

KEYDIY KD B12-3 3-Button Ford Flip Key Remote - 5pcs/lot (Replacement for Ford Vehicles)

## Problem: Key Replacements for Ford Vehicles – A Costly and Time-Consuming Hassle For European and American automotive repair shops and Ford vehicle owners, replacing lost or damaged keys can feel l…

Day21浮动

相关文章