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

CSS-float浮动与流体布局（1）

2015-12-11 10:52 477 查看
1 引言

float设计的初衷仅仅是实现文字环绕效果。所以当内部块级元素设置为float：left时，其兄弟的文字出现环绕效果：

<pre name="code" class="html"><div style="width:300px;height:200px;background-color:#ddd;">
<div style="width:200px;height:100px;background-color:#ccc;float:left;"></div>
Float的设计初衷仅仅是:实现文字环绕效果
</div>



效果如下：



换成图片：

<div style="width:300px;height:200px;background-color:#ddd;">
<div style="width:200px;height:100px;background-color:#ccc;float:left;"></div>
<img width=45px height=30px src="P_00.jpg"/>
<img width=45px height=30px src="P_01.jpg"/>
<img width=45px height=30px src="P_02.jpg"/>
<img width=45px height=30px src="P_03.jpg"/>
</div>
效果：


                                            

                                        

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

                    

                    

                        

                         标签： 
                                                CSS
                                                float浮动
                                                流体布局
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航