下記に記述されているcssの場合は、「.profile .imageクラス」のフローティングボックスから、「.profile .textクラス」の文字列が「左に」はみ出ずに表示されます。
それは「.profile .textクラス」にoverflow: hidden;が作用しているからです。
その時に疑問をもった点として、「overflow: hidden;クラス」ははみ出た要素を表示しないだけなのに、どうして本来はフローティングボックスからはみ出てそのまま左に表示されるはずの文字列が「一列」に表示されるのか？
という点です。
cssに関しては学習がたりていないため、「Clear fix」するための方法の詳細を知りたく、今回質問致しました。
以上何かしらご指摘頂ければ幸いです。
problem.html
.profile .text {
overflow: hidden;
}
にcssを指定しないと、フローティングボックスから文字列が左にはみ出る。
index.htnl
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="profile">
<div class="image">
<img src="img/images.jpeg">
</div>
<div class="text">
<p class="greeting">asdfasdfasdfasdfasdfasdfasdf</p>
<br>
<p>asdfasdfasdfasdfasdfasdfasdfasdf</p>
<br>
<p>asdfasdfasdfasdfasdfasdfasdfasdf</p>
<br>
<p>asdfasdfasdfasdfasdfasdfasdfasdf</p>
<br>
<p>asdfasdfasdfasdfasdfasdfasdfasdf</p>
<br>
<p>asdfasdfasdfasdfasdfasdfasdfasdf</p>
<br>
<p>asdfasdfasdfasdfasdfasdfasdfasdf</p>
<br>
<p>asdfasdfasdfasdfasdfasdfasdfasdf</p>
</div>
</div>
</body>
</html>
style.css
.profile {
overflow: hidden; /* clearfix*/
padding: 15px;
background-color: #fff;
}
.profile .image {
float : left;
margin-right: 15px;
border-radius: 80px;
}
.profile .text {
overflow: hidden;
}
/*overflow プロパティ hiddenしたり何したり
参照URL http://www.tagindex.com/stylesheet/box/overflow.html
例 .profile .textクラスに対して、overflow: hidden;を使用しないと
フローティングボックス - -
------- text -
img - text -
img - text -
------- text -
---------------------
text
text
text
text
という感じで、フローティングボックス(.profile .image)が左に回り込んでいる。
写真の要素が左側に回り込むと、後続の要素がすべて画像の右側に来る。
けど、フローティングボックスのボックスの影響を受けない出た文字列が
そのまま左側に表示されている。
URL http://css-happylife.com/archives/2009/1102_0115.php
になんでoverflow hiddenを使うのかの具体例がわかる。
*/