【CSS】浮动 ② ( 浮动语法简介 | 文字环绕效果 | 左浮动 | 右浮动 )

news/2024/4/29 15:21:40/文章来源:https://blog.csdn.net/han1202012/article/details/129698279

文章目录

一、浮动语法简介
- 1、语法说明
- 2、没有浮动的效果
- 3、左浮动的效果
- 4、右浮动的效果
- 5、右浮动 + 外边距效果
二、完整代码示例

一、浮动语法简介

1、语法说明

为元素设置了浮动 CSS 属性 , 可以实现 :

元素标签不再受标准流控制 ; ( 块级元素 , 行内元素 , 行内块元素的布局方式 )
元素标签可以放置在指定的位置 , 靠左或靠右 ;

CSS 浮动语法 :

选择器 {float: 浮动属性值;
}

浮动属性值取值 :

none : 默认设置 , 元素没有浮动效果 ;
left : 元素左浮动 ;
right : 元素右浮动 ;

2、没有浮动的效果

浮动效果需要结合文字来进行对比 , 浮动可以实现使用文字环绕图片的效果 ;

设置没有浮动效果 :

			/* 默认无浮动效果 */float: none;

展示效果 : 图片是行内块元素 , 与文字地位相同 , 无法实现文字环绕图片效果 ;

在这里插入图片描述

3、左浮动的效果

左浮动效果 , 可以让图片浮动在左上角 , 文字环绕在图片周围 ;

设置左浮动效果 :

			/* 左浮动效果 */float: left;

展示效果 :

在这里插入图片描述

4、右浮动的效果

右浮动效果 , 可以让图片浮动在右上角 , 文字环绕在图片周围 ;

设置右浮动效果 :

			/* 右浮动效果 */float: right;

展示效果 :

在这里插入图片描述

5、右浮动 + 外边距效果

如果想要图片不想靠盒子模型边界太近 , 可以为图片设置一个外边距 ;

			/* 右浮动 */float: right;/* 设置图片外边距 */margin: 10px;

展示效果 :
在这里插入图片描述

二、完整代码示例

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    <meta charset="UTF-8" /> <title>浮动效果</title><style>/* 清除标签默认的内外边距 */* {padding: 0;     margin: 0;}/* 盒子大小 */div {width: 800px;height: 600px;background-color: pink;}/* 图片浮动设置 */img {/* 默认无浮动效果 *//*float: none;*//* 左浮动 *//*float: left;*//* 右浮动 */float: right;/* 设置图片外边距 */margin: 10px;}</style>
</head>
<body><div><img src="images/image3.png" alt="">孙子曰:兵者，国之大事，死生之地，存亡之道，不可不察也。故经之以五事，校之以计，而索其情:一曰道，二曰天，三曰地，四曰将，五曰法。道者，令民与上同意，可与之死，可与之生，而不危也；天者，阴阳、寒暑、时制也；地者，远近、险易、广狭、死生也；将者，智、信、仁、勇、严也；法者，曲制、官道、主用也。凡此五者，将莫不闻，知之者胜，不知之者不胜。故校之以计，而索其情，曰:主孰有道？将孰有能？天地孰得？法令孰行？兵众孰强？士卒孰练？赏罚孰明？吾以此知胜负矣。将听吾计，用之必胜，留之；将不听吾计，用之必败，去之。计利以听，乃为之势，以佐其外。势者，因利而制权也。兵者，诡道也。故能而示之不能，用而示之不用，近而示之远，远而示之近。利而诱之，乱而取之，实而备之，强而避之，怒而挠之，卑而骄之，佚而劳之，亲而离之，攻其无备，出其不意。此兵家之胜，不可先传也。夫未战而庙算胜者，得算多也；未战而庙算不胜者，得算少也。多算胜少算，而况于无算乎!吾以此观之，胜负见矣。</div>
</body>
</html>