float 属性将元素浮动在页面中，与相邻元素并排显示，不会影响常规流式布局。float 值为：left（左浮动）、right（右浮动）、none（清除浮动）。浮动元素影响内容溢出、间距和父容器高度。清除浮动的方法包括：清除属性、浮动元素、overflow: hidden。
CSS 中 float 的用法
float 定义
CSS 中的 float 属性将元素定位在它的内容盒之外，使其浮动在页面中。浮动元素不会影响其他元素的常规流式布局，而是与其相邻的元素并排显示。
float 值
立即学习“前端免费学习笔记（深入）”；
float 属性可以接受以下值：
left：将元素浮动到容器的左侧。right：将元素浮动到容器的右侧。none：清除浮动，使元素恢复到正常流式布局。
用法
要浮动元素，请将 float 属性添加到其样式中：
element { float: left;}
影响
浮动元素会影响其附近的元素：
内容溢出：浮动元素的内容可能会溢出与其相邻的元素。间距：浮动元素和相邻元素之间可能会出现间距。父容器高度：如果浮动元素的高度高于父容器，则父容器的高度将自动调整以容纳浮动元素。
清除浮动
要清除浮动，可以使用以下方法之一：
清除属性：将 clear 属性应用于元素，清除其所有浮动元素。浮动元素：在浮动元素后面添加一个浮动元素，将浮动元素清除到新的行。overflow: hidden：将 overflow 属性应用于父容器，将浮动元素隐藏在容器中。
实例
下面的代码创建一个带有两个浮动元素的容器：
元素 1元素 2
.container { display: flex;}.element1 { float: left; background: red; width: 100px;}.element2 { float: right; background: blue; width: 100px;}
输出：
元素 1 | 元素 2
以上就是css中float的用法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1629014.html
微信扫一扫 
支付宝扫一扫 
