CSS 文字浮动

 

目录

1.文字向右浮动

2.文字向左浮动

3.文字围绕图片

4.文字不想围绕图片

5.水平排列div


 

 

 

 

 

 

 

 

浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

属性:float
值: left,right

1.文字向右浮动


 
正常文字1
正常文字2
浮动的文字
正常文字4
正常文字5

2.文字向左浮动

文字向左浮动
首先,向左浮动后,会把“坑”让出来,这个时候"正常的文字4“ 就会过来试图占这个坑,但是,发现 “浮动的文字”并没有走,结果,就只好排在它后面了


 
正常文字1
正常文字2
浮动的文字
正常文字4
正常文字5

CSS 文字浮动_第1张图片

3.文字围绕图片

当图片不浮动时,文字就会换行出现在下面
当图片浮动时,文字围绕着图片
和步骤2一样,当图片浮动的时候,就会让出这个“坑”出来,这个时候文字就试图去填补这个“坑”,结果发现,尼玛,图片没走,那就只好围绕图片摆放了


 

当图片不浮动时,文字就会换行出现在下面 当图片不浮动时,文字就会换行出现在下面 当图片不浮动时,文字就会换行出现在下面 当图片不浮动时,文字就会换行出现在下面 当图片不浮动时,文字就会换行出现在下面 当图片不浮动时,文字就会换行出现在下面

当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片

CSS 文字浮动_第2张图片

4.文字不想围绕图片

不允许出现浮动元素
属性:clear
值: left right both none
如果p左边出现了浮动的元素,如此例,则设置clear:left 即达到不允许浮动元素出现在左边的效果


 

当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片 当图片浮动时,文字围绕着图片

当图片浮动时,文字却不想围绕图片 当图片浮动时,文字却不想围绕图片 当图片浮动时,文字却不想围绕图片 当图片浮动时,文字却不想围绕图片

CSS 文字浮动_第3张图片

 

5.水平排列div

默认的div排列是会换行的
如果使用float就可以达到水平排列的效果,通常会用在菜单,导航栏等地方
如果超出了父容器,还会有自动换行的效果


默认的div排列是会换行的
 
 
菜单1
菜单2
菜单3
如果使用float就可以达到水平排列的效果,通常会用在菜单,导航栏等地方 如果超出了父容器,还会有自动换行的效果
菜单1
菜单2
菜单3
菜单4
菜单5
菜单6

 

CSS 文字浮动_第4张图片

 

 

 

 

 

 

你可能感兴趣的:(CSS)