divで改行したいと思っているのですが考え方誤っていますでしょうか？

Question

お世話になっております。

.right{
	float: right;
}

.left{
	float: left;
}

<div>
 <div class="left">
  説明
 </div>
 <div class="right">
  写真
 </div>
</div>
<div>
 次の項目
</div>

とした場合

 説明　　次の項目　　　　写真

となってしまうのですが

 説明　　　　　　写真
次の項目

としたい場合上記のhtml表記は考え方が違うのでしょうか？

お忙しいところ大変申し訳ないのですが
上記お問い合わせいたします。

Answer 1

floatしたら、回り込み解除が必要なので、囲んでいるdivにoverflowで解除すれば解決するかと思います。
sk_3122さんのclearfixでも可能です。
overflowであれば１行で済みますが、背景設定している時など、切れてしまうので、どちらを使うかは目的などに応じて使い分けるといいと思います。

.right{
    float: right;
}
.left{
    float: left;
}
.wrap {
	overflow: hidden;;
}

<div class="wrap">
	<div class="left">説明</div>
	<div class="right">写真</div>
</div>
<div>次の項目</div>

Comments

[moitaro]

ありがとうございます。

overflow: hidden;

でラップするのが一番良さそうですねっ

基本的な事を聞いてしまい失礼しました。

Answer 2

float を解除したい場合は clear:both とかをしないと
後続の div なども float に巻き込まれます。

今は疑似要素を指定して解除させるのが一般的でしょうか。
「clearfix」で検索すると色々出てきます。

/* ★class="clearfix" を指定した要素の最後に clear:both の疑似要素を追加する指定 */
.clearfix::after{
  content: "";
  display: block;
  clear: both;
}

<div class="clearfix"> <!-- ★追加 -->
 <div class="left">
  説明
 </div>
 <div class="right">
  写真
 </div>
</div>
<div>
 次の項目
</div>

Comments

[moitaro]

ありがとうございます。
clearfix
も気を付けないとイケナイですねっ

コメントありがとうございました。

Answer 3

要素を横に並べる用途でのfloatプロパティの使用は違う気がするので, display:inline-blockとしました. なお「div要素で改行」は誤った言い回しに思えます.

.right,.left{
	display:inline-block;
}

Comments

[moitaro]

ありがとうございます。
floatではなく
display:inline-block
で指定するというやり方もあるのですねっ

そちらも勉強してみます。