オーバーフローが隠されていると、子要素が自分の行に表示される

Question

overflow: hiddenが.containerになると、pタグはラップする代わりに自分の行にドロップダウンされます。どうしてこれなの？

.container { 
 
\t background-color: green; 
 
\t overflow: hidden; 
 
} 
 

 
.floated { 
 
\t float: left; 
 
\t background-color: cyan; 
 
} 
 
p { 
 
\t background-color: pink; 
 
}

<div class='container'> 
 
\t \t <div class='floated'> 
 
\t \t \t Floated Div 
 
\t \t </div> 
 
\t \t <p>Some textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome textSome text</p> 
 
</div>

Answer 1

あなたが見ている余分なスペースは、段落の余白と、それらを処理している方法から来ています。

コンテナにoverflow: hidden;を追加すると、ブロック書式設定コンテキストが作成されます。段落要素の余白は.containerに含まれます。

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

、あなた浮かべ要素に段落を揃える段落要素の上マージン削除するには：

p { 
    background-color: pink; 
    margin-top: 0; 
}