我是靠谱客的博主 能干冬日,最近开发中收集的这篇文章主要介绍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——脱离标准流方法一:浮动所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

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

评论列表共有 0 条评论

立即
投稿
返回
顶部