我是靠谱客的博主 欣喜硬币,这篇文章主要介绍CSS——脱离标准流方法一:浮动,现在分享给大家,希望可以做个参考。

浮动是css里面布局用的最多的属性。

浮动语句:

float:left;  左浮动

float:right;  右浮动

1、没有浮动的时候



2、两个盒子都左浮动




浮动的元素脱标,那么就能并排了,并且能够设置宽高了。一个span标签如果浮动,不需要转成块级元素,就能设置宽度、高度。浮动的所有标签已经不区分行内、块了。

浮动的元素互相贴靠。

3、两个盒子都右浮动


4、浮动的元素有“字围”效果

<div>盒子1</div>
<p>12345文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</p>


div左浮动,p不浮动,div挡住了p,但是p中文字不会被挡住,形成“字围”效果。

浮动的性质:脱标、贴边、字围、收缩。

收缩:一个浮动的元素,如果没有设置width,那么将自动收缩为文字的宽度(这点非常像行内元素)。

最后

以上就是欣喜硬币最近收集整理的关于CSS——脱离标准流方法一:浮动的全部内容,更多相关CSS——脱离标准流方法一内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(119)

评论列表共有 0 条评论

立即
投稿
返回
顶部