您的位置:首页 > 科技 > 能源 > 外贸英才网_天元建设集团招聘官网_市场调查报告_佛山网站建设解决方案

外贸英才网_天元建设集团招聘官网_市场调查报告_佛山网站建设解决方案

2024/12/23 5:28:40 来源:https://blog.csdn.net/m0_74012211/article/details/142714818  浏览:    关键词:外贸英才网_天元建设集团招聘官网_市场调查报告_佛山网站建设解决方案
外贸英才网_天元建设集团招聘官网_市场调查报告_佛山网站建设解决方案

目录

1. 清除浮动

2. 清除浮动本质

3. 清除浮动

4. 清除浮动方法

4.1 额外标签法

4.1.1 总结

4.2 父级添加 overflow

 4.3 after 伪元素法

 4.4 双伪元素清除浮动

5 总结


1. 清除浮动

 

 

这是上面的源代码:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 不给高度,只给宽度,其中的内容会撑开外面的大盒子 */.box {background-color: bisque;width: 600px;border: 5px red solid;}/* 添加浮动后,不给高度的大盒子高度为 0,因为浮动的元素不占有位置 */.one,.two {width: 200px;height: 200px;background-color: aquamarine;float: left;}/* 布局再添加一个 footer,布局就会更加乱 */.footer {height: 200px;background-color: burlywood;}</style>
</head>
<body><div class="box"><div class="one">111</div><div class="two">222</div></div><div class="footer"></div>
</body>
</html>

2. 清除浮动本质

3. 清除浮动

4. 清除浮动方法

4.1 额外标签法

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 不给高度,只给宽度,其中的内容会撑开外面的大盒子 */.box {background-color: bisque;width: 600px;border: 5px red solid;}/* 添加浮动后,不给高度的大盒子高度为 0,因为浮动的元素不占有位置 */.one,.two {width: 200px;height: 200px;background-color: aquamarine;float: left;}/* 布局再添加一个 footer,布局就会更加乱 */.footer {height: 200px;background-color: burlywood;}.cle {clear: both;}</style>
</head>
<body><div class="box"><div class="one">111</div><div class="two">222</div><div class="cle"></div></div><div class="footer"></div>
</body>
</html>
4.1.1 总结

4.2 父级添加 overflow

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 不给高度,只给宽度,其中的内容会撑开外面的大盒子 */.box {overflow: hidden;background-color: bisque;width: 600px;border: 5px red solid;}/* 添加浮动后,不给高度的大盒子高度为 0,因为浮动的元素不占有位置 */.one,.two {width: 200px;height: 200px;background-color: aquamarine;float: left;}.footer {height: 200px;background-color: burlywood;}</style>
</head>
<body><div class="box"><div class="one">111</div><div class="two">222</div></div><div class="footer"></div>
</body>
</html>

 4.3 after 伪元素法

使用时直接复制以下代码即可:

.clearfix:after {content:"";display: block;height: 0;clear: both;visibility: hidden;}/*  .clearfix {*zoom: 1;} */
 4.4 双伪元素清除浮动

 使用时直接复制以下代码即可:

.clearfix:before,.clearfix:after {content: "";display: table;}.clearfix:after {clear: both;}/*  .clearfix {*zoom: 1;}  */
5 总结

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com