css选择器及float(浮动)

--------------------------选择器( css有就近原则)-------------------------------

　　选择器名称                 在css表的形态                在html中的调用

•html标记符选择器：        p,a,img,div,span....          不用另外加任何东西

•具有上下关系的选择器:     div span a (中间是空格)       不用另外加任何东西

•类（class）选择器：         .    ( 比如:   .header)     <div class="header "></div>

•id选择器  （一般不用id，留给js来操作）                 #     ( 比如:    #text  )    <div id="text "></div>

•群组选择器 (优化代码)              .left , .right , p , ul , li •伪类选择器 （选择器上加上：hover）       a:hover{color:#ccc}

选择器的优先级: 行间  >  id选择器  >  class选择器  >  标记符选择器

2.浮动（float）

　　功能：用于在普通元素流布置规则以外放上元素。 　

　数值： none -无改动。 　　　　　

               left -将其它元素内容放到浮动元素右边。 　　　

　           right -将其它元素内容放到浮动元素左边

---------------------float(浮动)-------------------------

为什么要 清除浮动????

　　浮动带来的负面影响:

　　会使父级对象的高度消失,

　　导致背景图片,

　　边框不能正常显示,

　　margin,padding设置值不能正确显示（特别是上下边的padding和margin不能正确显示）;

清除浮动的三种方式:( 1 ):直接给父级确定的高度; (项目中的扩展,不现实 )

 　　　　　　　　   ( 2 ):在父级的css里直接加上 overflow:hidden;  但是不能和height同时出现;  overflow:hidden;和height同时出现(功能:超出部分被隐藏; )

 　　　　　　　　   ( 3 ):a:在css里面 .***{ clear:both;}  b:在父级结束之前新添 <div class="***"></div>

　　　　　　　　　　　　<div>

　　　　　　　　　　　　　　<div class="***"></div>

　　　　　　　　　　　　</div>

转载于:https://www.cnblogs.com/fxty/p/7044847.html