clear：both巧妙解答

最新推荐文章于 2017-08-05 15:20:46 发布
最新推荐文章于 2017-08-05 15:20:46 发布
阅读量444 收藏
点赞数
分类专栏： html5 css 文章标签： html5 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31301099/article/details/50383031
版权
html5 同时被 2 个专栏收录
28 篇文章 0 订阅
订阅专栏
css
20 篇文章 0 订阅
订阅专栏 
<div style="border:2px solid red;">
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:90px;height:90px;border:1px solid blue;">TEST DIV</div>
    <div style="float:left;width:100px;height:100px;border:1px solid blue;">TEST DIV</div>
    <div style="clear:both;"></div>
</div>
将这段代码复制上去看效果就会明白
1.有clear:both的：


2.无clear:both的：


这样看，应该就一目了然了：原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之后，
就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。

但这种办法就是最好了的吗？
我这么说，当然答案就不是了。可以采用通过Hack实现：
 
<style>
    .clearfix:after{
        visibility: hidden;
        display: block;
        font-size: 0;
        content: ".";
        clear: both;
        height: 0;
    }

    * html .clearfix{zoom: 1;}
    *:first-child + html .clearfix{zoom: 1;}
</style>
<body>
<input type="button" class="btn btn-default" value="haode">


<div class="clearfix" style="border: 2px solid red;">
    <div style="float: left; width: 80px; height: 80px; border: 1px solid blue;">
       
        TEST DIV</div>
</div>
 
看完解决办法，咱们来看里边的原理：
（1）、首先是利用:after这个伪类来兼容FF、Chrome等支持标准的浏览器。
:after伪类IE不支持，它用来和content属性一起使用设置在对象后的内容，例如：
a:after{content:"(link)";}
这个CSS将会让a标签内的文本后边加上link文本文字。
 
（2）、利用“* html”这个只有IE6认识的选择符，设置缩放属性“zoom: 1;”实现兼容IE6。
（3）、利用“*:first-child + html”这个只有IE7认识的选择符，设置缩放属性“zoom: 1;”实现兼容IE7。




                

        

        

    




    

      

        

            

              
                
                  九
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
clear:both 的作用介绍

				
			

			

				

					09-25
				

			

		

		

			
				
Clear:both;其实就是利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之可以采用通过Hack实现，感兴趣的朋友可以参考下

			
		

	



                

              
                



	

		

			

				
					
clear:both后margin-top不起作用其他左右下都起作用

				
			

			

				

					09-25
				

			

		

		

			
				
在CSS布局中，`clear:both`属性用于解决元素因前一个浮动元素而产生的环绕问题。当一个元素设置了`float:left`或`float:right`时，它会脱离常规文档流，而`clear:both`则用于清除这种浮动，使后续元素不再受到前面...

			
		

	



                


  
              

                


	

		

			

				
					
CSS中 clear.both 的理解

				
			

			

				

					小可的笔记本
				

				

					08-23
					
					637
					
				

			

		

		

			
				
在CSS中我们会经常要用到“清除浮动”Clear，比较典型的就是clear:both;CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。 当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（浮动）所影响，这个时候...

			
		

	





	

		

			

				
					
clear:both的理解

				
			

			

				

					u010033172的专栏
				

				

					04-05
					
					1922
					
				

			

		

		

			
				
在CSS中我们会经常要用到“清除浮动”Clear，比较典型的就是clear:both;



CSS手册上是这样说明的：该属性的值指出了不允许有浮动对象的边。这个属性是用来控制float属性在文档流的物理位置的。

当属性设置float（浮动）时，其所在的物理位置已经脱离文档流了，但是大多时候我们希望文档流能识别float（浮动），或者是希望float（浮动）后面的元素不被float（

			
		

	



		

			
		



	

		

			

				
					
前端学习 -- clear:both的测试

				
			

			

				

					ChpeShy的博客
				

				

					05-21
					
					558
					
				

			

		

		

			
				
前端学习 – clear:both的测试

clear:both这个属性从字面上的理解其实就是清除所有样式，但它主要还是用来清除div框的浮动的（其他作用还没发现）。 
清除div框的浮动这个概念我之前一直没理解什么意思。然后通过测试，终于明白了。下面直接上图理解。

首先代码层级结构如下：




其中div1和div2都给了float:left和宽度属性。由于没有给高度和overflow属性，...

			
		

	





	

		

			

				
					
html css float left与 float right的使用说明

				
			

			

				

					weixin_33719619的博客
				

				

					02-12
					
					809
					
				

			

		

		

			
				
点评：
CSS中很多时候会用到浮动来布局，也就是经常见到的float:left或者float:right，简单点来说，前者是左浮动(往左侧向前边的非浮动元素飘，全是飘得元素的话，就按照流式来浮动从左到右，放不下则换行)，后者是右浮（往右飘）动。但仅仅是如此吗？详细出处参考：http://www.jb51.net/css/33740.html

No! 要注意以下几点： 1、 浮动元素会被自动...

			
		

	





	

		

			

				
					
clear:both 的作用

				
			

			

				

					chuyuqing的专栏
				

				

					07-08
					
					7497
					
				

			

		

		

			
				
如：



    TEST DIV

    



 

你可以将此部分代码放到一个HTML页面看看效果，然后在去掉””看一下效果,就知道这句话的作用了。

 

如图：

 

（1）有clear:both的：






（2）无clear:both的




 

这样看，应该就一目了然了：原来后边的Clear:both

			
		

	





	

		

			

				
					
深度理解CSS clear:both的使用

				
			

			

				

					11-21
				

			

		

		

			
				
clear:both用来清除浮动这是一直来的印象，但是自己很少会用这个，理解其实也不太正确，今天查查了资料，记录一下 float的脱离文档流 float的原始作用是为了实现文字环绕的作用，可以理解为部分脱离文档流。 CSS中说...

			
		

	





	

		

			

				
					
CSS 浮动清理，不使用 clear:both标签

				
			

			

				

					10-30
				

			

		

		

			
				
CSS:浮动清理，不使用 clear:both标签 在进行浮动布局时，大多数人都深知，在必要的地方进行浮动清理：<div xss=removed></div>。

			
		

	





	

		

			

				
					
更简洁的 CSS 清理浮动方式（使用 :after 伪类来提供浮动块后的 clear:both）

				
			

			

				

					yaolei258的专栏
				

				

					04-17
					
					1608
					
				

			

		

		

			
				
前几天发现了一段css
.clear:after { 
     content: "."; 
     display: block; 
     height: 0; 
     clear: both; 
     visibility: hidden; 
}
.clear{
    zoom:1;
}
大概了解到这是用来清楚浮动的，但是对于after,content，

			
		

	





	

		

			

				
					
clear both 的用法

				
			

			

				

					猿客行
				

				

					08-26
					
					1328
					
				

			

		

		

			
				
在开发中，从美工MM给你Html代码中，肯定能经常看”div
style="clear:both;">div>”这样的代码，但是你真的能明白它是做什么用的吗？
如：
div
style="border:2px
solid red;">
    div
style="float:left;width:80px;height:80px;border:1px
solid blue;">T

			
		

	





	

		

			

				
					
理解CSS clear:both/left/right的含义以及应用

				
			

			

				

					Wendy
				

				

					08-05
					
					1万+
					
				

			

		

		

			
				
前言：
       感觉是刚过春招，又要开始秋招，对于技术渣渣、学历普通的我，忧愁再次降临。开始准备秋招路途中……来温故而知新，沉下心好好学习。貌似本人在清除浮动中第一次接触clear:left/right，平时只用到clear:both，好像也只见到这个，这就尴尬了。


一、什么是浮动，标准文档流又是个啥
       所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从

			
		

	





	

		

			

				
					
div CSS   清除float常用方法(:after和clear:both)

				
			

			

				

					王鹤霖的专栏         三人行必有我师
				

				

					02-02
					
					920
					
				

			

		

		

			
				

很多前端都是用.clearfix:after{ .....}  和 .clearit{....}的组合 来清除浮动， 下面我来讲解下这俩种的用法：

首先大家切页面经常用到浮动 float:left; float:right; 有浮动就需要清除他们，
after伪类由于受到ie6 7的不支持所以大多数时候，一般都需要定义一个固定的class名设置属性clear的值both的div 两

			
		

	





	

		

			

				
					
如何判断用户输入的邮箱格式是否正确？

					
热门推荐

				
			

			

				

					小九的博客
				

				

					12-08
					
					8万+
					
				

			

		

		

			
				
用户名@网站名-例sina.com、tom.com、yahoo.com.cn……（有些小网站的邮箱在填资料时不认，所以推荐用网站的邮箱）
一般都是用来判断.
什么是正则表达式？就是用如下特殊符号或其组合来代表某个字符（以下符号可以通配所有字符）符号	说明
.	代表除换行符以外的任意字符
\w	代表字母或数字或下划线或汉字
\s	代表任意的空白符
\d	代表数字
\b	代表单词的开始或结束
^	

			
		

	





	

		

			

				
					
html结合JavaScript简单的城市下拉列表

				
			

			

				

					小九的博客
				

				

					12-03
					
					8492
					
				

			

		

		

			
				
html>
html>
head lang="en">
    meta charset="UTF-8">
    title>title>
head>
body>
//定义第一个下拉列表
select id="prov" onchange="change();">      //当点击第一个下拉列表时回调一个函数 change（）；
select>
//定义第二个下拉列表select id="

			
		

	





	

		

			

				
					
jquery 音乐添加

				
			

			

				

					小九的博客
				

				

					12-17
					
					2497
					
				

			

		

		

			
				
html>
html lang="en">
head>
    meta charset="UTF-8">
    title>title>
head>
script src="jquery-1.3.2.min.js">script>

body>


div id="bg_music_btn" state='1' style="background-color: black;height: 10

			
		

	





	

		

			

				
					
CSS clear:both

					
最新发布

				
			

			

				

					09-10
				

			

		

		

			
				
CSS的clear:both属性用于控制元素的浮动行为。当一个元素设置了浮动（float）属性，它会脱离正常的文档流并浮动在其他元素的周围。其他元素会忽略该浮动元素的位置，导致布局混乱。  如果想要解决这种混乱，可以使用...

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值