css中float的用法

百变鹏仔 4周前 (09-19) #CSS

文章标签 css

float 属性将元素浮动在页面中，与相邻元素并排显示，不会影响常规流式布局。float 值为：left（左浮动）、right（右浮动）、none（清除浮动）。浮动元素影响内容溢出、间距和父容器高度。清除浮动的方法包括：清除属性、浮动元素、overflow: hidden。

CSS 中 float 的用法

float 定义

CSS 中的 float 属性将元素定位在它的内容盒之外，使其浮动在页面中。浮动元素不会影响其他元素的常规流式布局，而是与其相邻的元素并排显示。

float 值

立即学习“前端免费学习笔记（深入）”；

float 属性可以接受以下值：

用法

要浮动元素，请将 float 属性添加到其样式中：

element {  float: left;}

影响

浮动元素会影响其附近的元素：

清除浮动

要清除浮动，可以使用以下方法之一：

实例

下面的代码创建一个带有两个浮动元素的容器：

<div class="container">  <div class="element1">元素 1</div>  <div class="element2">元素 2</div></div>

.container {  display: flex;}.element1 {  float: left;  background: red;  width: 100px;}.element2 {  float: right;  background: blue;  width: 100px;}

输出：

元素 1 | 元素 2

文章推荐