0

仔细阅读有关“块格式化上下文”（BFC）的文章后，我仍然有一个基本问题是是否可以创建 BFC，首先编写“溢出：隐藏”div，然后是浮动 div（或者左还是右）。

用例子比用文字更容易。

假设有这样的 CSS 布局：

.container{
    background-color:#ccc;
    padding:10px;
}
.secondary{
    float:right;
    width:200px;
    background-color:yellow;
    margin-left:10px;
    padding:10px;
}
.primary{
    overflow:hidden;
}

当辅助容器的内容不够长以致邮箱在不需要的位置修剪邮件正文时，这可以正常工作。当其内容过长时，一些邮箱会修剪邮件内容。结果，显示的唯一内容确实是次要内容。

所以我的问题是作为解决这种不幸情况的一种方法。我准备了两个 JSFiddles。通过这种方式，您可以检查我想要实现的目标，我暂时忽略的方法。

工作 BFC：http: //jsfiddle.net/vnZ5c/2/

<div class="container">
    <div class="secondary">
        <strong>.secondary</strong>
        <p>This is a secondary content which should not be displayed in any circumstances before the main content. It exists a risk with those mailboxes that trim long emails which would make only visible this secondary content instead of the main content.</p>
    </div>
    <div class="primary">
        <strong>.primary</strong>
        <p>This is the primary content, which must appear before anything else, regardless of the length of the secondary content.</p>
        <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt ultrices leo faucibus condimentum. Suspendisse potenti. Phasellus sollicitudin ullamcorper pharetra. Sed sodales sagittis ultricies. Vestibulum feugiat lacus augue, a pellentesque elit tincidunt quis. Vestibulum fringilla aliquet urna, et porttitor velit facilisis ac. Donec euismod fermentum lacus, ac egestas dolor tincidunt vel. Pellentesque at accumsan tortor.</em></p>
    </div>
</div>

不工作 BFC：http: //jsfiddle.net/eZFXH/

<div class="container">
    <div class="primary">
        <strong>.primary</strong>
        <p>This is the primary content, which must appear before anything else, regardless of the length of the secondary content.</p>
        <p><em>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tincidunt ultrices leo faucibus condimentum. Suspendisse potenti. Phasellus sollicitudin ullamcorper pharetra. Sed sodales sagittis ultricies. Vestibulum feugiat lacus augue, a pellentesque elit tincidunt quis. Vestibulum fringilla aliquet urna, et porttitor velit facilisis ac. Donec euismod fermentum lacus, ac egestas dolor tincidunt vel. Pellentesque at accumsan tortor.</em></p>
    </div>
    <div class="secondary">
        <strong>.secondary</strong>
        <p>This is a secondary content which should not be displayed in any circumstances before the main content. It exists a risk with those mailboxes that trim long emails which would make only visible this secondary content instead of the main content.</p>
    </div>
</div>

是否可以将浮动 div 写在第二位来创建“块格式化上下文”？

太感谢了！

PS：当然我有桌子布局的诱惑......

4

0 回答 0