本文摘自PHP中文网，作者墨辰?R，侵删。
本篇文章主要介绍HTML中浮动与清除浮动，感兴趣的朋友参考下，希望对大家有所帮助。一、float：主要目的是为了实现文本绕排图片的效果。
也成了创建多栏布局最简单的方式。
1 2 | <img src= “ ” />
<p>文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
|
【1】文本绕排图片
1 2 | P {margin: 0; border: solid 1px;}
img {float: left;}
|
【2】创建多栏布局
1 2 | P {margin: 0; border: solid 1px; width: 200px; float: left;}
img {float: left;}
|
二、浮动元素脱离了文档流，其父元素也看不到他了，因为也不会包围他，就会出现子元素有高度，而父元素不会被撑起，这时候并非我们想要，
下面有三种方法解决，请审时度势合理应用：
1 2 3 4 5 | <section>
<img src=" />
<p>这是段落这是段落这是段落这是段落这是段落这是段落这是段落</p>
</section>
<footer>这是底部这是底部这是底部这是底部这是底部这是底部这是底部</footer>
|
1 2 | section , footer {border: solid 1px;}
img {float: left;}
|
【1】为父元素添加 overflow： hidden；强制父元素包围浮动元素
这样声明的真正用途是 防止父元素被超大内容撑开，应用overflow： hidden之后，父元素依然保持其设定的宽度，超大的子内容会被容器剪切掉
除此之外，overflow： hidden还有另外一个作用，即它能可靠地迫使父元素包含其浮动子元素。
不能在使用下拉菜单的顶级元素上使用，否则作为其子元素的下拉菜单就不会显示了。
【2】同时浮动父元素, 宽度100%与浏览器宽度同宽， 给footer设置清除浮动，使footer不会挤到section旁边去
1 2 3 | section {border: solid 1px; float: left; width:100%}
footer {border: solid 1px; clear: left}
img {float: left;}
|
不能在靠外边距自动居中的元素使用。否则不再居中。
【3】添加非浮动的清除元素（伪元素）
1 2 3 4 5 6 7 | .clearfix: after {
content: "";
display: block ;
height: 0
visibility: hidden;
clear : both
}
|
三、没有父元素时，如何清除(img p 作为一组 ，没有父元素)
1 2 3 4 5 6 7 8 | <section>
<img src=" />
<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
<img src=" />
<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
<img src=" />
<p class="clearfix">文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容文本内容段落内容</p>
</section>
|
1 2 3 4 5 6 7 | .clearfix: after {
content: "";
display: block ;
height: 0
visibility: hidden;
clear : both
}
|
总结：以上就是本篇文的全部内容，希望能对大家的学习有所帮助。
相关推荐：
JS简单实现浮动窗口
怎么处理http被劫持浮动广告
CSS实现清除浮动问题的
以上就是HTML中浮动与清除浮动的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
Html文本域标签属性有哪些？Html文本域标签属性用法介绍
Html i是什么标签？Html i标签的使用方法总结
Html导航栏怎么设置
Html u标签怎么用
Html li标签是干嘛的？Html li标签用法和属性的介绍
Html怎么删除下划线
Html noframes标签怎么用
http和Html分别指什么
使用Html+css制作一些动画提示工具
怎么在Html中引入vue.js文件
更多相关阅读请进入《Html》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » HTML中浮动与清除浮动
