革除浮动的css写法是什么

革除浮动的css写法有如下这些：1、在父元素中的结尾加一个空的div；2.、在父元素设定overflow属性；3、通过设定伪元素的after

左浮动
右浮动
喵
  .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写法是什么的细致内容，更多请关注 百分百源码网 其它相干文章！