float 属性将元素浮动在页面中,与相邻元素并排显示,不会影响常规流式布局。float 值为:left(左浮动)、right(右浮动)、none(清除浮动)。浮动元素影响内容溢出、间距和父容器高度。清除浮动的方法包括:清除属性、浮动元素、overflow: hidden。
CSS 中 float 的用法
float 定义
CSS 中的 float 属性将元素定位在它的内容盒之外,使其浮动在页面中。浮动元素不会影响其他元素的常规流式布局,而是与其相邻的元素并排显示。
float 值
float 属性可以接受以下值:
用法
要浮动元素,请将 float 属性添加到其样式中:
<code class="css">element { float: left; }</code>
影响
浮动元素会影响其附近的元素:
清除浮动
要清除浮动,可以使用以下方法之一:
实例
下面的代码创建一个带有两个浮动元素的容器:
<code class="html"><div class="container"> <div class="element1">元素 1</div> <div class="element2">元素 2</div> </div></code>
<code class="css">.container { display: flex; } .element1 { float: left; background: red; width: 100px; } .element2 { float: right; background: blue; width: 100px; }</code>
输出:
<code>元素 1 | 元素 2</code>
以上是css中float的用法的详细内容。更多信息请关注PHP中文网其他相关文章!