您的位置：首页 > Web前端 > CSS

对 clear:both 这个样式的一些理解

2016-02-24 17:36 543 查看
看下我今天一直研究的两个例子吧。希望对自己跟大家有帮助：例子一：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
}
</style>
</head>
<body>
<div style="border:2px solid red;">
<div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
<div style="clear:both;"></div>
</div>

<div style="height: 10px">
</div>

<div class="clearfix" style="border: 2px solid red;">
<div style="float: left;width:80px;height: 80px;border:1px solid blue;">TEST DIV</div>
</div>

</body>
</html>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body {
font-family: Tahoma, Geneva, Helvetica, sans-serif !important;
color: #000 !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
background-color: #fff !important;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}/* 作用：   与<div style="clear: both"></div>相同，将外层的div撑开         */
</style>
</head>
<body>

<div style="background-color: #f5fafe;width: 500px;height: 300px;margin: 20px 20px">  <!--最外层div-->
<div style="padding: 50px 40px 40px 80px">   <!--用户名/密码的承载层，定义距离父层的距离-->
<div style="padding: 20px 20px;">         <!--用户名/密码层之间的空间间隔-->
<div style="float: left;width: 20%;text-align: right;"><label>用户名:</label></div>   <!--浮动20%-->
<div style="float: left;position: relative">    <!--与下面children层进行position匹配-->
<div><input /></div>              <!--定义标签以及错误已经样式-->
<div style="position: absolute;font-size: 8px;color:#ff0000;background: #FFEBEB;height: 15px;line-height: 15px;width: 100%">用户名不能为空</div>
</div>
<div style="clear: both"></div>        <!--将外层的div撑开，与class='chearfix'作用相同-->
</div>

<div class="clearfix" style="padding: 20px 20px;">
<div style="float: left;width: 20%;text-align: right;"><label>密码:</label></div>
<div style="float: left;position: relative">
<div><input type="password"/></div>
<div style="position: absolute;font-size: 8px;color:#ff0000;background: #FFEBEB;height: 15px;line-height: 15px;width: 100%">密码不能为空</div>
</div>
</div>
</div>

</div>

</body>
</html>
View Code例子一有参考：http://blog.sina.com.cn/s/blog_4a3789a70100jfv4.html

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航