文章目录
一、浮动语法简介
1、语法说明
2、没有浮动的效果
3、左浮动的效果
4、右浮动的效果
5、右浮动 + 外边距效果
二、完整代码示例
一、浮动语法简介
----
1、语法说明
为 元素 设置了...浮动 CSS 属性 , 可以实现 :
元素标签 不再受 标准流 控制 ; ( 块级元素 , 行内元素 , 行内块元素 的布局方式 )
元素标签 可以 放置在指定的位置 , 靠左 或 靠右 ;
CSS...浮动语法 :
选择器 {
float: 浮动属性值;
}
浮动属性值 取值 :
none : 默认设置 , 元素没有浮动效果 ;
left : 元素 左浮动 ;
right : 元素 右浮动 ;
2、...没有浮动的效果
浮动效果需要结合文字来进行对比 , 浮动可以实现 使用文字环绕图片 的效果 ;
设置没有浮动效果 :
/* 默认无浮动效果 */
float: none;
展示效果 : 图片是 行内块元素..., 与文字地位相同 , 无法实现文字环绕图片效果 ;
3、左浮动的效果
左浮动效果 , 可以让图片浮动在左上角 , 文字环绕在图片周围 ;
设置左浮动效果 :
/* 左浮动效果 */
float: