清除浮动的css写法有哪些

左浮动
右浮动
喵
  .child1 {
    float: left;
    height: 500px;
    width: 70%;
    background: #aa0;//黄
  }
  .child2 {
    float: right;
    height: 300px;
    width: 30%;
    background: #0aa;//青
  }
  .child3 {
    background: #a0a;//紫
  }

那么，只在一侧不允许浮动是怎样的呢？
本来是酱紫的：
 
child1右浮动
child2右浮动
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈...

  .child1 {
    float: right;
    background: #aa0;//黄
  }
  .child2 {
    float: right;
    background: #0aa;//青
  }

那么，为 child1 加上 clear: left; 的时候，为什么不起效果呢？在这留个小彩蛋，欢迎大家留言讨论~

三、浮动带来的影响

浮动带来的最大影响就是，当父元素只包含浮动的子元素的时候，父元素的高度就会塌陷（ height 变为 0 ）。

像酱紫：（parent高度为0，无法显示粉色背景）

    
child1右浮动
    
child2右浮动

  .parent {
    background: #FBC;//粉
  }

div

  
child1右浮动
  
child2右浮动
  



  .child1 {
    float: right;
    background: #aa0;
  }
  .child2 {
    float: right;
    background: #0aa;
  }

• 缺点：子元素若超出父元素尺寸会被隐藏，或者父元素出现滚动条

  
child1右浮动
  
child2右浮动

• 优点：浏览器支持好，普遍

  
child1右浮动
  
child2右浮动

  .clearfix{
    zoom: 1;    //zoom（IE专有属性）可解决ie6，ie7浮动问题
    display: block;
  }
  .clearfix:after {
    content: ".";    //content: "";也可
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
  }

更多CSS问题的相关技术文章，请访问CSS问题教程栏目进行学习！

以上就是清除浮动的css写法有哪些的详细内容，更多请关注 第一PHP社区 其它相关文章！