display:flowt-root作用实例页面

回到相关文章 »

效果：

1. 去除浮动

2. 去除margin合并

margin: 2em;

margin: 2em;

代码：

CSS代码：

p {
    outline: solid deepskyblue;    
}
img {
    float: left;
    width: 128px;
}
.flow-root {
    display: flow-root;
}
.box {
    background-color: #f0f3f9;    
}
.box p {
    margin: 2em;
}

HTML代码：

<h4>1. 去除浮动</h4>
<p><img src="mm.jpg"></p>
<div style="clear:both;"></div>
<p class="flow-root"><img src="mm.jpg"></p>

<h4>2. 去除margin合并</h4>
<div class="box">
    <p>margin: 2em;</p>
</div>
<div class="box flow-root">
    <p>margin: 2em;</p>
</div>