CSS 文字浮动

 

目录

1.文字向右浮动

2.文字向左浮动

3.文字围绕图片

4.文字不想围绕图片

5.水平排列div

---

 

 

 

 

 

 

 

 

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

属性：float
值： left,right

1.文字向右浮动

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

2.文字向左浮动

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

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

3.文字围绕图片

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

 

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


 

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

4.文字不想围绕图片

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

 

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


 

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

 

5.水平排列div

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

默认的div排列是会换行的
 
 

       菜单1
 
 

       菜单2
 
 

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

  

       菜单1
 
 

       菜单2
 
 

       菜单3
 
 

       菜单4
 
 

       菜单5
 
 

       菜单6