CSS浮动

浮动

可以让块级元素待在一行，紧挨着，没有空格
float：left

• 浮动的元素会脱离正常的文档系统，像浮云一样飘起来
  
• 浮动元素背面的正常元素会自动补位
  
• 浮动元素会被父元素的宽高所束缚，所以不算完全的脱离文档流
  
• 当浮动元素的上一行是正常元素时，这个浮动元素只能待在当前行，不能跑到上一行
  
• 左浮动：元素向左跑，会从上一行最右边出来继续跑，直到碰到做浮动元素，紧贴着他
  
• 右浮动：元素向右跑，会从上一行最左边出来继续跑，直到碰到做浮动元素，紧贴着他
  

1.         ul{
2.             width: 800px;
3.         }
4.         ul li{
5.             float: left;
6.             list-style-type: none;
7.             list-style-position: inside;
8.             padding: 20px;
9.         }
10.         img{
11.             width: 100px;
12.             height: 100px;
13.         }

复制代码

1.     <ul>
2.         <li><img src="../duck.jpg" alt=""></li>
3.         <li><img src="../duck.jpg" alt=""></li>
4.         <li><img src="../duck.jpg" alt=""></li>
5.         <li><img src="../duck.jpg" alt=""></li>
6.         <li><img src="../duck.jpg" alt=""></li>
7.     </ul>

复制代码

扫除浮动

规定元素哪一侧不能有浮动元素
清理元素左侧的浮动：

1.    clear: left;

复制代码

元素右侧无浮动元素，记得考虑页面的加载次序：

1.    clear: right;

复制代码

元素左右侧都无浮动元素：

1.    clear: both;

复制代码

父元素高度塌陷

（子元素）li设置了浮动，不能给父元素撑起高度（父元素未设置高度），因而会造成塌陷，如下图所示：

1.         ul{
2.             width: 800px;
3.             border: 1px solid red;
4.         }

复制代码

扫除浮动的方法

• 给父元素（块级元素）设置高度
  
• 在元素内容之后加一个块级元素，并设置左右两侧都无浮动元素
  
• （不增长元素的前提下）使用伪元素的方法，并将其转化为表格元素
  

1.         ul::after{            content: "";            display: table;            clear: both;
2.         }

复制代码

同一设置，可将其设置为一个类，如许只需要在父元素中引入类名即可：

1.         .clearfix::after{            content: "";            display: table;            clear: both;
2.         }

复制代码

1.     <ul class="clearfix">
2.         <li><img src="../duck.jpg" alt=""></li>
3.         <li><img src="../duck.jpg" alt=""></li>
4.         <li><img src="../duck.jpg" alt=""></li>
5.         <li><img src="../duck.jpg" alt=""></li>
6.         <li><img src="../duck.jpg" alt=""></li>
7.     </ul>

复制代码

注意：父元素设置有高度时，不消扫除浮动

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。