在代码中在放一个空的div标签,然后给这个标签设置clear:both来清除浮动对页面的影响。
优点:简单,方便兼容性好
缺点:因为会造成结构混乱,不利于后期维护
建议:一般情况下不建议使用该方法
2、利用伪元素clearfix来清除浮动
给父级元素添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的
.clearfix:after {
display: block
clear: both
content: ""
visibility: hidden
height: 0
}
.clearfix { zoom: 1}
原理:IE8以上和非IE浏览器才支持:after,zoom(IE转有属性)可解决ie6,ie7浮动问题
优点:浏览器支持好,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点:代码多,不少初学者不理解原理,要两句代码结合使用,才能让主流浏览器都支持
建议:推荐使用,建议定义在公共类,以减少css代码
3、父级div定义overflow方法
当给父元素设置了overflow样式,不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了。
.parent-container {
/* other style... */
overflow: hidden
}
原理:它的本质就是建构了一个BFC,这样使得达到撑起父元素高度的效果。
优点:简单,代码少,浏览器支持好
缺点:不能和position配合使用,因为超出的尺寸的会被隐藏
建议:只推荐没有使用position或对overflow:hidden理解比较深的朋友使用
4、双伪元素方法的使用
通过给父元素设置双伪元素来达到清除浮动的效果,即添加:before和:after伪元素。
.clearfix:before,.clearfix:after {
content: ""
display: block
clear: both
}
与方法2相同
浮动和盒状模型、定位是CSS重点和难点。浮动,就是让div样式层块,向左或向右(靠)浮动。
Float:left 靠左浮动;Float:right 靠右浮动;clear:both清除浮动,简单举例如下:
CSS样式如下:
.box1{ float:left width:200px height:300px background:#f00}/* 设置div对象浮动靠左*/.box2{ float:rightwidth:200px height:300pxbackground:#0f0}/* 设置div对象浮动靠右 */
.clear{ clear:both}/*清除浮动*/
html代码如下:
<div class="divcss5"><div class="box1">布局靠左浮动</div>
<div class="box2">布局靠右浮动</div>
<div class="clear"></div><!-- html注释:清除float产生浮动 -->
</div>
效果如下:
浮动利用好了,再结合相对定位,绝对定位,CSS排版基本上就能搞定了,细节的东西在实践中去体验吧。
一共有4种侧滑动画特效。这款CSS3菜单的特点是鼠标划过时即可以各种动画方式展开和隐藏菜单项,该动画方式由CSS3中的transition-delay属性来完成<style type="text/css">
/*Fontawesome Iconfont*/
@import url(http://libs.useso.com/js/font-awesome/4.0.1/css/font-awesome.min.css)
@import url(http://fonts.useso.com/css?family=Montserrat)
* {margin: 0padding: 0}
li {list-style-type: none}
.grid {float: leftwidth:980pxmargin: 0 auto}
.grid >li { width: 285pxheight: 500pxoverflow: hiddenfloat: leftmargin: 20px 0 20px 30pxposition: relative}
.grid >li:hover {box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.5)}
.grid>li section {position: relativetransition: all 0.25swidth: 100%}
.grid>li h2 {font: bold 14px montserratcolor: #ffftext-transform: uppercaseposition: absolutetext-align: centerwidth: 60%left: 20%top: 100pxpadding: 10px 0border: 2px solid whiteborder-radius: 4px}
.sidenav { position: absolutetop: 0left: 0bottom: 0background: linear-gradient(rgba(50,60,60, 1), rgba(50,60,60, 0.7))width: 50pxtransition: all 0.25soverflow: hiddenpadding-top: 100px}
.sidenav li { _overflow: hiddenwidth: 150px}
.sidenav a { text-decoration: nonecolor: #eee display: blockline-height: 48px }
.sidenav span {display: block}
.sidenav b { padding-left 10pxdisplay: blockcolor: whitefont-family: Montserratfont-size: 12pxline-height: 4opacity: 0}
.sidenav a i { display: blockfloat: leftfont-size: 16pxline-height: 48pxwidth: 50pxtext-align: center}
/*All instances*/
.grid>li:hover .sidenav {width: 150px}
.grid>li:hover section {margin-left: 150px}
.grid>li:hover b {opacity: 1}
.sidenav li:nth-child(1) b, .sidenav li:nth-child(1) a {transition-delay: .08s}
.sidenav li:nth-child(2) b, .sidenav li:nth-child(2) a {transition-delay: .16s}
.sidenav li:nth-child(3) b, .sidenav li:nth-child(3) a {transition-delay: .24s}
.sidenav li:nth-child(4) b, .sidenav li:nth-child(4) a {transition-delay: .32s}
.sidenav li:nth-child(5) b, .sidenav li:nth-child(5) a {transition-delay: .40s}
.sidenav li:nth-child(6) b, .sidenav li:nth-child(6) a {transition-delay: .48s}
/*Three*/
.three .w {transform: perspective(100px) translateZ(-24px)}
.three b {transform: perspective(100px) rotateY(180deg) translateZ(24px) scale(0.5)}
.three:hover b {transform: perspective(100px) rotateY(0) translateZ(24px) scale(1)transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275)background: transparent}
.three .sidenav {width: 150px}
/*Two*/
.two .w {transform: perspective(100px) translateZ(-24px)}
.two b {transform: perspective(100px) rotateX(90deg) translateZ(24px) scale(1.5)opacity: 0}
.two:hover b {transform: perspective(100px) rotateX(0) translateZ(24px) scale(1)transition: all .4sopacity: 1}
.two .sidenav {width: 150px}
/*One*/
.one .w {transform: perspective(100px)}
.one b {transform: perspective(100px) rotateY(90deg)_opacity: 0transform-origin: left center_border: 1px solid white}
.one:hover b {transform: perspective(100px) rotateX(0)transition: all .4sopacity: 1}
.one .sidenav {width: 150px}
.one .sidenav span {float: leftwidth: 100px}
</style>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="htmleaf-container">
<header class="htmleaf-header bgcolor-11">
<div class="htmleaf-demo center">
<a href="index.html">DEMO1</a>
<a href="index2.html" class="current">DEMO2</a>
<a href="index3.html">DEMO3</a>
<a href="index4.html">DEMO4</a>
</div>
<div style="text-align:centerclear:both">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
</header>
<div class="htmleaf-content bgcolor-8">
<ul class="grid">
<li class="one">
<ul class="sidenav">
<li><a><i class="fa fa-check"></i><span class="w"><b>Tasks</b></span></a></li>
<li><a><i class="fa fa-inbox"></i><span class="w"><b>Messages</b></span></a></li>
<li><a><i class="fa fa-pencil"></i><span class="w"><b>New Post</b></span></a></li>
<li><a><i class="fa fa-cog"></i><span class="w"><b>Settings</b></span></a></li>
<li><a><i class="fa fa-star"></i><span class="w"><b>Starred</b></span></a></li>
<li><a><i class="fa fa-power-off"></i><span class="w"><b>Logout</b></span></a></li>
</ul>
<section>
<h2>Door Opening</h2>
<img src="img/mb1.png"/>
</section>
</li>
<li class="two">
<ul class="sidenav">
<li><a><i class="fa fa-check"></i><span class="w"><b>Tasks</b></span></a></li>
<li><a><i class="fa fa-inbox"></i><span class="w"><b>Messages</b></span></a></li>
<li><a><i class="fa fa-pencil"></i><span class="w"><b>New Post</b></span></a></li>
<li><a><i class="fa fa-cog"></i><span class="w"><b>Settings</b></span></a></li>
<li><a><i class="fa fa-star"></i><span class="w"><b>Starred</b></span></a></li>
<li><a><i class="fa fa-power-off"></i><span class="w"><b>Logout</b></span></a></li>
</ul>
<section>
<h2>Flip Down</h2>
<img src="img/mb2.png"/>
</section>
</li>
<li class="three">
<ul class="sidenav">
<li><a><i class="fa fa-check"></i><span class="w"><b>Tasks</b></span></a></li>
<li><a><i class="fa fa-inbox"></i><span class="w"><b>Messages</b></span></a></li>
<li><a><i class="fa fa-pencil"></i><span class="w"><b>New Post</b></span></a></li>
<li><a><i class="fa fa-cog"></i><span class="w"><b>Settings</b></span></a></li>
<li><a><i class="fa fa-star"></i><span class="w"><b>Starred</b></span></a></li>
<li><a><i class="fa fa-power-off"></i><span class="w"><b>Logout</b></span></a></li>
</ul>