html - float 元素破坏布局

Question

我有一个很棒的弹出窗口。如果我想 float 一个元素以便两个元素彼此相邻出现，弹出窗口的布局就会被破坏。

通过使用“float: left”将图片和文字并排放置，看看自己:

http://jsfiddle.net/a7Vj8/1/

当我想 float 图像和文本时，白色背景变小了。哪里有问题？当我使用“float:left”时总是会发生这种情况。

这是我的 HTML:

<div id="modal_profile_organisor" class="white_modal mfp-hide">

                    <div class="modal_padding">

                            <h3>Organisor</h3>

                            <div class="modal_organisor_details">

                                <img src="http://placehold.it/100x100">
                                <p>Some small text</p>



                            </div>


                    </div> <!-- /.modal_padding -->

                </div> <!-- /#modal_profile_organisor -->

<a href="#modal_profile_organisor" id="popup_organisor_modal">open modal</a>

Answer 1

如果您使用floats，您必须在不再需要元素 float 的位置清除这些 float ，例如用 clear: both;

工作 fiddle

这是一个 clearfix 类 HTML5 BOILERPLATE用途:

/*
 * Clearfix: contain floats
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    `contenteditable` attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that receive the `clearfix` class.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

.clearfix:before,
.clearfix:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.clearfix:after {
    clear: both;
}

/*
 * For IE 6/7 only
 * Include this rule to trigger hasLayout and contain floats.
 */

.clearfix {
    *zoom: 1;
}

有了它，您可以将 clearfix 类设置为 float 元素的包装容器。