开发中经常遇到的一些css样式问题

1、经常会遇到子元素浮动了，父元素就会探索到一个合适的值现在值是0，就要清除浮动操

<div class="search clearfix">     
　　<div class="le"><img src="../static/images/logo2.png" alt=""></div>
     <div class="mid">
       <input type="text">
     </div>
     <div class="ri">
       <img src="../static/images/posi.png" alt="">
       <div>东莞市</div>
       <img src="../static/images/bottom.png" alt="">
     </div>
 </div>

常用的清除浮动方法：

①、.clearfix:after {

　　content:"";

　　display:block;

　　height:0;

　　visibility:hidden;

　　clear:both; 

}

.clearfix{*zoom:1;}

还有可以写成这样：

②、.clearfix:after {

　　content:"\200B";/＊Unicode字符里有一个“零宽度空格”，也就是U+200B，它本身是不可见的，所以可以省略掉 visibility:hidden ＊/

　　display:block;

　　height:0;

　　clear:both; 

}

.clearfix{*zoom:1;}

另一种最新式方法：

.③、clearfix{

    overflow: auto;

    *room: 1;  //支持IE6

}

还有一种：

④、.clearfix:before,.clearfix:after {

　　content:"";

　　display:table;

}

.clearfix:after { clear:both; }/* For IE 6/7  */

.clearfix{*zoom:1;}

2、有时候经常两个模块会出现小缝隙，很可能是字体导致的，在外层加个font-size:0;进行处理

3、有时候需要内容适应窗口变化进行适应性

.ri > div{
　　word-wrap: break-word;  /*允许对长的不可分割的单词进行分割并换行到下一行*/
　　word-break: break-all;　　/*规定非中文的换行规则，允许内容自动在单词内换行*/
　　overflow: hidden;　　/*超出的内容隐藏*/
　　text-overflow: ellipsis;　　/*超出的内容显示省略符号，clip直接修剪文本，string使用给定的字符串代表被修剪的文本*/
}

个人总结的，后面有补充的可以在评论区评论，稍后更新