环绕：
<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
汪杰 阅读(244)
评论(0) 编辑 收藏 引用 所属分类:
div css dhtml