asfman
android developer
posts - 90,  comments - 213,  trackbacks - 0
    环绕:
         
<div style="position: absolute; left: 500px; top: 20px; border: 1px solid red; padding: 10px; width: 300px;">
                    <div style="float: left; width: 100px; height: 100px; background: gray; margin-right: 10px;">img</div>
                    
<div style="">
我要实现左上角是图片,然后就是文字环绕在图片的右边,像下面的效果图一样。我要实现左上角是图片,然后就是文字环绕在图片的右边,
像下面的效果图一样。我要实现左上角是图片,然后就是文字环绕在图片的右边,像下面的效果图一样。我要实现左上角是图片,然后就是文
字环绕在图片的右边,像下面的效果图一样。我要实现左上角是图片,然后就是文字环绕在图片的右边,像下面的效果图一样。我要实现左上
角是图片,然后就是文字环绕在图片的右边,像下面的效果图一样。
                    
</div>
            
</div>

不环绕:            

<div style="position: absolute; left: 500px; top: 320px; border: 1px solid red; padding: 10px; width: 300px;">
                    
<div style="float: left; width: 100px; height: 100px; background: gray; margin-right: 10px;">img</div>
                    
<div style="overflow: hidden; zoom: 1;">
我要实现左上角是图片,然后就是文字环绕在图片的右边,像下面的效果图一样。我要实现左上角是图片,然后就是文字环绕在图片的右边,
像下面的效果图一样。我要实现左上角是图片,然后就是文字环绕在图片的右边,像下面的效果图一样。我要实现左上角是图片,然后就是文
字环绕在图片的右边,像下面的效果图一样。我要实现左上角是图片,然后就是文字环绕在图片的右边,像下面的效果图一样。我要实现左上
角是图片,然后就是文字环绕在图片的右边,像下面的效果图一样。
                    
</div>
            
</div>

In order to become a skilled CSS developer, you need to understand the underlying concepts of CSS that make it work and not just how to produce certain visual effects. The "block formatting context" is one of those concepts that drives how CSS affects your page without you even knowing it.

The easiest way to think about a block formatting context is as an isolated container that controls the layout of the boxes within it without regard for elements outside of it. For instance, when you float a div, it establishes a new block formatting context. Nothing inside the float will interact with anything outside the float.

But not every div establishes a new block formatting context, nor are divs the only elements that can establish them. Any block element can establish a new block formatting context if it has one of the following property/value pairs set on it:

  • float: left
  • float: right
  • position: absolute
  • display: inline-block
  • display: inline-table
  • display: table-cell
  • display: table
  • overflow: auto
  • overflow: scroll
  • overflow: hidden

This is all well and good, but what's the point of setting a new block formatting context? Most of the time, you don't need to worry about it, it's just something that's going on behind the scenes that you don't need to get involved with. Sometimes, however, the lack of a new context can make elements interact in undesirable ways. The primary reason for setting a new context is to keep cleared elements inside a main content div from clearing floated sidebars. We'll use this problem as a case study for how to establish new block formatting contexts and to see what their effect is on the other elements around them.

posted on 2011-10-27 11:06 汪杰 阅读(138) 评论(0)  编辑 收藏 引用 所属分类: div css dhtml
只有注册用户登录后才能发表评论。

<2019年11月>
272829303112
3456789
10111213141516
17181920212223
24252627282930
1234567

常用链接

留言簿(15)

随笔分类(1)

随笔档案(90)

文章分类(727)

文章档案(712)

相册

收藏夹

http://blog.csdn.net/prodigynonsense

友情链接

最新随笔

搜索

  •  

积分与排名

  • 积分 - 384864
  • 排名 - 6

最新随笔

最新评论

阅读排行榜

评论排行榜