BFC implements media object layout

In the media object layout, in order to make the text and the image appear side by side instead of surrounding them, BFC is introduced to the text element. The concept of BFC is as follows:

Block Formatting Context - Web Developer Guide | MDN Block Formatting Context (BFC) is part of the visual CSS rendering of a Web page. It is the area where the layout process of the block box occurs, and where floating elements interact with other elements. Area. https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_contextExample reference:

Understand the BFC of CSS at once - Zhihu Preface BFC is an important but difficult to understand concept in the learning of CSS. BFC also involves many other issues, such as floating, positioning, box model, etc., so it is necessary to understand BFC of. This article summarizes BFC and hopes to be helpful to you. What is BFC? Let’s take a look at the definition of MDN first: Block formatting... https://zhuanlan.zhihu.com/p/127187654 To create a BFC in a media object, you usually set the overflow value for the element - hidden or auto.

.media-image{
float:left;
margin-right:1.5em}
.media-body{
overflew:auto;
margin-top:0;
}

Setting margin-top to 0 clears the top margin set by the global owl selector.