清楚浮动的方法

最新推荐文章于 2022-12-06 09:59:20 发布

亿光年距离

最新推荐文章于 2022-12-06 09:59:20 发布

阅读量373

点赞数 1

分类专栏：日常总结文章标签： css

本文链接：https://blog.csdn.net/zhujiecan/article/details/90674051

版权

日常总结专栏收录该内容

7 篇文章 0 订阅

订阅专栏

为什么要清楚浮动

因为浮动存在浮动父级高度塌陷的缺陷，所以要清楚浮动
父级高度塌陷是因为浮动的元素脱离了普通文档流，也就是浮起来了，没有可以撑起父元素高度的了高度就变成0了

清楚浮动的方法

浮动在布局中常用，所以面试时也是经常提问的问题
下面几种常用的清楚浮动的方法
下面为所有方法的前提布局
清除浮动原理：就是让其重新审查自己内部的元素，使其包裹住所有元素，从而达到清楚浮动的效(即BFC)
BFC=Block Formatting Contexts, 块级格式化上下文

   <!DOCTYPE html>
   <html lang="zh">
   <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>清楚浮动的方法</title>
      <style>
          body,ul,li{            
              margin: 0;            
              padding: 0;        
          }
          .ul-wrapper{
              width: 300px;
              background-color: rgba(0,0,0, .5);
              list-style-type: none;
          } 
    	   .item{            
 	      float: left;            
 	      width: 90px;            
 	      height: 30px;            
 	      margin: 10px 5px;        
 	   }        
 	   .item1{           
 	       background-color: red;        
 	   }        
 	   .item2{            
 	       background-color: orange;        
 	   }        
 	   .item3{            
 	       background-color: purple;        
 	   }
      </style>
   </head>
   <body>    
       <ul class='ul-wrapper'>        
       	  <li class='item item1'>这是盒子1</li>        
       	  <li class='item item2'>这是盒子2</li>        
       	  <li class='item item3'>这是盒子3</li>    
       </ul>
   </body>
   </html>

第一种在父元素尾部添加after伪类

	.ul-wrapper::after{            
	    content: '';            
	    display: block;            
	    clear: both;        
	}

第二种给父级添加超出隐藏属性

        .ul-wrapper{
	    overflow: hidden;
	}
	// 或者
	.ul-wrapper{
     	    overflow: auto;
 	}

第三种给父级设置高度

最简单的办法，就是让父级有高度，可以包裹住子元素

第四种浮动元素不用清楚浮动

如果父级浮动，则父级的父级也会导致高度坍塌，不建议使用此方法

第五种在父元素尾部添加块级元素

添加的块级元素不设置宽高，要设置clear: both;属性和属性值

   <style>
        .item-clear{
 	    clear: both;
        }
    </style>	
    // 在父级尾部添加一个空的li标签
    <li class='item-clear'></li>

亿光年距离

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录