盒子的浮动：float属性

最新推荐文章于 2024-06-18 20:48:07 发布
最新推荐文章于 2024-06-18 20:48:07 发布
阅读量1.5k 收藏
点赞数
分类专栏： CSS页面布局及排版 文章标签： css float 定位 浮动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36689512/article/details/53862738
版权

盒子的浮动：float属性

               在CSS中，通过设置块级元素的float属性，可以使元素浮动。属性如下所示：

①none:默认属性，元素不浮动，并会显示在其在文本中出现的位置。

②lfet:元素向左浮动，表示向父元素的左侧靠紧。

③right:元素向右浮动，表示父元素的右紧靠。如下是实例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子的float属性</title>
		<style type="text/css">
			body{
			margin: 15px;
			font-family: "微软雅黑";
			font-size: 12px;
			}
			.son1{
			border: dashed;
			float: left;
			}
			.son2{
			border: dashed;
			float:right;	
			}
		</style>
	</head>
	<body>
	<div>
		<div class="son1"><em><b>floatleft</b></em></div>
		<div class="son2"><em><b>floatright</b></em></div>	
    </div>	
	</body>
</html>


203最强
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
盒子模型、浮动属性及定位属性
thwr1881的博客
04-22 1739
1、什么是盒子模型 进行网页布局的重要属性，一个页面由可以由多个盒子组成。 盒子的组成：内容区域+边框(border)+内边距（padding）+外边距(margin) 2、div标签 div标签是块级标签，在没有设置高度、宽度时，和文本标签p功能类似，也可以自动换行。但和p标签不同的是，div标签可以作为容器包含其他标签，而p标签则不能作为容器使用。 3、盒子模型的属性：用盒子作为页面的布局时会用到的属性 3.1、border边框属性 边框属性 作用 border 边框基本属性 bod
CSS浮动十：float设计初衷：图文混排
小枯林的博客
12-24 2582
float设计初衷：实现图文混排。 后来，随着技术的不断应用，将div用到更多的场合，比如商品列表并排显示便是float的典型应用。 目录 一：图文混排的实现 1.图文混排示例程序：通过“段落和div进行混排”实现 2.图文混排示例程序：通过“段落和图片进行混排”实现 2.1具体实现代码和效果 2.2文字的上面和下面均留有间隔的问题 如下： 一：图文混排的实现 1.图文混排示例程序：通过“段落和div进行混排”实现 <!DOCTYPE html> <html&gt.
盒子浮动属性
IEDDSS的专栏
08-19 311
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Do.
CSS盒子模型, 浮动和定位
2201_75449897的博客
06-18 127
【代码】盒子模型, 浮动和定位。
盒子模型中的浮动属性
m0_71345904的博客
06-02 1182
一,什么是浮动浮动就是让元素脱离文档流。属性：1，float：left；元素靠左边浮动。2，float：right：元素靠右浮动。3，float:none:元素不浮动。特点：元素脱离文档流之后，就不会占据文档流位置，下面的元素会自动上移设置浮动后，它不会超过它前面的元素浮动以后，块元素和行内元素特性也会发生变化，块元素不会独占一行，行内元素也可以设置宽高了。浮动会“见缝插针”浮动的元素，默认情况下，不会超过其父元素作用：定义网页中其他文本如何环绕该元素显示让竖着的元素横着来，就是垂直布局可以变成水平方向布局
day03-浮动属性&盒模型
HAI6545的博客
12-06 133
盒子模型、浮动（float）
qq_40628901的博客
03-29 588
盒子模型 盒子模型组成 边框（border） 属性 作用 border-width 定义边框粗细，单位是px border-style 边框样式 border-color 边框颜色 solid：实线边框 dashed：虚线边框 dotted：点线边框 border-collapse: collapse;//合并相邻的边框 外边距 外边距可以让盒子水平居中 盒子必须指定...
CSS之float属性详解
01-08
float属性指定一个盒子（元素）是否应该浮动，可以设置浮动方向。 css语法 float：left|right|none|inherit ； 属性值： 值 描述 left 元素向左浮动 right 元素向右浮动 none 默认值。元素不浮动，并会...
css float浮动属性使用方法和实例讲解
最新发布
09-01
Css的float浮动属性，用于设置标签对象（如：标签盒子、标签、标签、标签等html标签）的浮动布局，浮动也就是我们所说标签对象浮动靠左（float:left）和浮动靠右(float:right)。 float的作用：通过css定义float...
css:浮动定位（float）以及清除浮动
YangLu888
10-11 817
css的浮动定位以及清除浮动
CSS 盒子模型及 float 和 position
weixin_34067980的博客
09-29 149
CSS和模型 CSS盒模型本质上是一个盒子，封装周围的 HTML 元素，包括 外边距（marign），边框（border），填充（padding），内容物（content） 盒子模型的类型：W3C 标准和模型和 IE 盒模型（怪异盒模型） W3C 标准盒模型：属性 width 和 height 只包含 content，不包括 bord...
程序猿学习第九天，浮动和盒子模型标签属性
wu_zida的博客
05-25 397
浮动相关属性 float属性值：left，right，none。该属性定义目标元素的浮动样式，分为左右和不浮动三种值。 clear属性值：left，right，both。该输赢用于清除浮动元素下方元素所受到的浮动影响，分别可以单独清除左右浮动影响，或者清除全部。 overflow属性值：visible，hidden，auto，scroll外层div如果不明确指定高度，会包裹内容，但包裹的内容不
3、CSS盒子模型，float和clear属性
AuhuAo的博客
03-24 961
（一）盒子模型 盒子：能存放内容的标记都是盒子，最大的盒子是HTML 边界（margin）：盒子外面叫边界，有上下左右4个边界； 填充（padding）：盒子里面叫填充，有上下左右4个填充； 边框（border）：盒子本身有边框，有上下左右4个边框。 （二）float属性（浮动属性）：将块显示标记左右排列 改变块元素（block element）对象的默认显示方式； 浮动元素（fl...
盒子模型讲解后继，display、overflow、float属性都了解多少？？还有文档流也一起看看吧，HTML、CSS（六）
weixin_46351593的博客
04-23 709
文章目录display属性display:none与visibility:hidden区别overflow属性文档流元素在文档流中的特点块元素内联元素浮动float属性float特点之前的 上次的笔记说了CSS中最重要的盒子模型，不知道大家掌握了没有，需要了解的可以查看上一次的博客。这次我们继续我们的笔记。 display属性 假设一个我们写一个超链接： <!DOCTYPE html>...
CSS(八) 盒子的浮动与定位
hlfsunshine的专栏
10-07 813
盒子浮动float Float 属性： 默认是none ，按照标准流来定位； Left：左悬浮； Right：右悬浮； html> head> meta charset="UTF-8"> title>盒子浮动float nonetitle> style type="text/css"> .parent{ padding:5px; backgr
CSS盒模型属性、CSS浮动属性、使用CSS+div布局
msw_171519574的博客
07-23 682
1. 盒子模型 找个网站，按f12后，对照右下脚显示的图片讲解 实线外部为margin空间，不属于元素占用的空间。 实线内部为该元素本身占用的空间：向内部伸展， 依次是boder>padding，注意一下width和height指的是哪一部的尺寸 2. CSS浮动属性floatfloat属性的作用就是改变块元素对象的默认显示方式。 块元素设置了float属性之后，它将不
CSS系列：CSS中盒子的浮动与定位
weixin_34097242的博客
12-26 175
1. 盒子的浮动 　　在标准流中，一个块级元素在水平方向会自动伸展，知道包含它的元素的边接；而在竖直方向与相邻元素依次排列，不能并排。 　　CSS中float属性，默认为none。将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧。同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来决定。 float: left; 　　可以使用clea...
盒子模型、选择器补充以及float浮动基础讲解
qq_45876651的博客
12-06 221
补充一：大盒子和小盒子的兼容问题： 问题所在：在大盒子里面套一个小盒子，给小盒子设置内、外边距会影响外面的大盒子一起移动 解决方式：在css中给大盒子加上一个overflow属性（如下）： voerflow:hidden;/*超出内容截断*/ 补充二：border-radius圆角设置 盒子圆角border-radius属性介绍： border-radius:90px;/*复合属性四个角同时设置半径为90px*/ 拓展为： border-top-left-radius:90px;/*设置左
CSS（三）解析盒子模型的浮动
adr5970的博客
06-24 165
上篇博客遗留了浮动和定位两个问题，仅仅是对他们进行了简单的描写叙述，今天细致透透他们的底细，此篇为浮动篇。 浮动在这个CSS排版流行的年代发挥着越来越关键的数据，如同aline对定位网页元素的重要性一样。但它比aline更加功能强大。 float主要功能是帮助对象在网页中对齐的。通过不同的命令使对象左右浮动，直...
HTML教程：理解与应用float浮动属性
`float`属性允许元素脱离常规文档流，使得元素可以向右或向左浮动。这种浮动机制在早期网页设计中广泛用于创建多列布局，它让元素能够移动到文本或其他元素的一侧，从而为其他内容腾出空间。 默认情况下，HTML元素...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值