福州網(wǎng)站建設>網(wǎng)站新聞>php技術(shù) 	
        
 
        

        
        
        
            
        
                
        子元素使用float 父元素撐開方法子元素float 父元素border
        
                
                
        發(fā)布日期：2019-08-11瀏覽次數(shù)：1339  來源：福州網(wǎng)站建設  
        
                
            
        
        
        
        
        
            
         
        
	一個Div包含了多個子Div，并且子Div使用了浮動后，父Div確不能被撐開，如下圖：

        

        
	

        

        
	部分代碼如下：

        

        
	
        
		復制代碼
	
        
	
        
		復制代碼
	
        
	
        
		1 <style>
        
2   #div1{border:1px solid red;float:left;}
        
3   #div2,#div3{float:right;border:1px solid blue;}
        
4 </style>
        
5 
        
6 <div id="div1">
        
7   <div id="div2">two</div>
        
8   <div id="div3">one</div>
        
9 </div>
	
        
	
        
		復制代碼
	
        
	
        
		復制代碼
	
        

        

        
	如果想要撐開父元素可以采用以下方法：
        

        
方法一：
        

        
父元素設置overflow以及zoom，樣式如下：

        

        
	
        
		1 <style>
        
2   #div1{border:1px solid red;overflow:hidden;zoom:1;}
        
3   #div2,#div3{float:right;border:1px solid blue;}
        
4 </style>
	
        

        

        
	方法二：
        

        
父元素也是設置浮動效果，樣式如下：

        

        
	
        
		1 <style>
        
2   #div1{border:1px solid red;float:left;}
        
3   #div2,#div3{float:right;border:1px solid blue;}
        
4 </style>
	
        

        

        
	此方法有個缺陷是，父元素的寬度需要設置。
        

        
方法三：
        

        
在添加一個子元素，并設置clear樣式：

        

        
	
        
		1 <div id="div1">
        
2   <div id="div2">two</div>
        
3   <div id="div3">one</div>
        
4   <div style="clear:both"></div>
        
5 </div>
	
        

        

        
	此方法添加了一個div元素，有些情況下可能這個div會影響元素的遍歷。
        

        
以上方法 使用doctype html 4.0 以及 doctype xhtml 1.0 的 Transitional 在FF IE6 IE7 IE8 下測試通過，其他瀏覽器沒有測試。

         

                                 
        
        



        
        

        
        
            
        
            	上一篇：bootstrap div元素內(nèi)容居中
                                
                下一篇：bootstrap中col-md-offset、col-md-push和col-md-pull的含義理解，用法解析

                            返回欄目列表
                            
        
        
        

         
        
             
             
        與php技術(shù)有關(guān)的文章
        
             
            
        
        
        

           
        
 

        
    
    
        
        如果您有什么問題，歡迎咨詢我們客服！
        點擊QQ咨詢