CSS样式 float浮动用法

2024-05-23 12:46:28

CSS样式 float浮动用法

前言

Css样式的float浮动属性，用于设置标签对象（如：<div>标签盒子、<span>标签、<a>标签、<em>标签等htmlL标签）的浮动布局，浮动就是标签对象浮动居左靠左（float：left）和浮动居右靠右（float：right）。

float的作用

通过css定义float（浮动）让div样式，向左或者向右浮动。

float语法

float常跟随的属性值：left、right、none

float none：不使用浮动

float left：靠左浮动

float right：靠右浮动

语法：float：none/left/right

参数值：
none：对象不浮动
left：对象浮在左边
right：对象浮在右边

float应用与用法

float浮动用于设置对象靠左或者靠右浮动样式，可以实现我们所需要的让div、span等标签居左居右浮动。

语法案例：

div{float:left}/*设置div对象浮动靠左（left）*/
div{float:right}/*设置div对象浮动靠左（right）*/

css float浮动案例

设置一个盒子里，一个靠右、一个靠左浮动两个盒子，为了更直观的看到浮动布局效果，我们对两个盒子设置宽度、高度和边框。
1.代码片段：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>浮动案例</title><style>.float{width:400px}.float_left{float:left;width:150px;border:1px solid #00f;height:50px;}.float_right{float:right;width:150px;border:1px solid #00f;height:50px;}</style>
</head><body>
<div class="float"><div class="float_left">布局靠左浮动</div><div class="float_right">布局靠右浮动</div><div class="clear"></div><!-- 清除float产生浮动 --></div>
</body>
</html>

2.效果截图

float浮动总结

我们要区别与文字内容靠左（text-align：left）靠右（text-align：right）样式，浮动只针对HTML标签设置靠左靠右浮动样式。float浮动样式没有浮动居中的样式。记住浮动靠右使用float;right，浮动靠左使用float:left

CSS样式 float浮动用法相关推荐

html中左浮动怎么写,div css float浮动用法(left right)
div+css中float认识及css float用法,DIV CSS float浮动知识用法与float浮动教程篇 Css样式的float浮动属性,用于设置标签对象(如: 标签盒子.标签.标签.标签 ...
css样式float造成的浮动“塌陷”问题的解决办法
css样式float造成的浮动"塌陷"问题的解决办法参考文章: (1)css样式float造成的浮动"塌陷"问题的解决办法 (2)https://www.cn ...
CSS之float浮动布局
css之float浮动布局浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 1. 浮 ...
什么是浮动塌陷css,css样式float造成的浮动“塌陷”问题的解决办法
什么是CSS Float? 定义: float 属性定义元素浮动到左侧或右侧.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级元素,而不论 ...
关于CSS样式清除浮动的总结
浮动的元素之间是互相贴靠的.但是在实际的工作中,我们是希望同组的元素互相贴靠的,但是不同组的元素之间是不互相贴靠的.第二组的元素不应该与第一组的元素有任何互相的影响. 比如,我们想要的效果是这样的: ...
CSS(十三)float浮动
float浮动文档流文档流是文档中可显示对象在排列时所占用的位置. float特性加浮动的元素,会脱离文档流,会延迟父容器靠左或靠右排列,如果之前已经有浮动的元素,会挨着浮动的元素进行排列. f ...
html float属性6,CSS float 浮动属性
本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 left 时的布局方式. 3. ...
CSS Float(浮动)
2019独角兽企业重金招聘Python工程师标准>>> 什么是CSS Float(浮动)? CSS的Float(浮动),元素可以围绕其他元素向左或向右被推动 Float(浮动),往往 ...
（12）css—float浮动样式
一.什么是浮动? 浮动是一种非常重要的布局属性. 属性名:float,漂流.浮动的意思. 属性值:left 左浮动 right 右浮动作用:让元素脱离标准流,同一级的浮动的元素可以并排在一排显示. ...

最新文章

热门文章