css beforeの使い方について

Question

質問は表題の通りです。

下記htmlのsample１とsample２は同じ構造で、
適用しているcssも同じものです。

<div class="service">
  <img src="img/service/service_text1.png" />
  <p>
    sample1</p>
  <ul>
    <li>sample</li>
    <li>sample</li>
    <li>sample</li>
    <li>sample</li>
  </ul>
</div><!--service閉じタグ-->

<div class="service">
  <img src="img/service/service_text2.png" />
  <p>
    sample2
  </p>
  <ul>
    <li>sample</li>
    <li>sample</li>
    <li>sample</li>
  </ul>
</div><!--service閉じタグ-->

.service{
	border: 1px solid rgb(78, 171, 70);
}

.service p{
	color: rgb(60, 126, 187);
}

.service li{
	float: left;
	margin-right: 30px;
}

.service li::before{
	content: "●";
	color: rgb(43, 121, 164);
}

ですが、なぜかsample2だけがボックスからはみ出てしまいます。
画像添付いたします。
ボックスを緑のボーダーで囲ってあります。

下記検証のコードです。

原因が分からず苦戦しております。
その他必要情報がありましたら追記致しますのでおっしゃってください。
お分かりになる方、宜しくお願いします。

Comments

[defghi1977]

::beforeが問題なんじゃなくてfloatが悪さをしています. clearfixで調べてみましょう.

[sousuke]

テストコードに変な文字が入っているのが気になります。

Answer 1

このソースだと、sample１の方もボックスからはみ出てしまうのが正常じゃないかなと思ったので、sublime textで開いてみたんですけど、
4つ目の<li>の前に、制御文字が入っています。（添付していただいたソースの画像のliの3つ目と４つ目の間）
この制御文字のため、sample1のulに高さが保持されています。
テキストエディタによって、表示されないツールもあるっぽいので、画像貼っておきますね。

それを消すと、liにfloatがかかっているため、sample1もsample2も、どちらもボックスから溢れてしまうと思います。
floatの解除は、clearfixを使いましょう。

	.service ul:after{
		clear: both;
		content: '';
		display: block;
	}

Comments

[kszk311]

floatの解除にclearfixと書きましたが、overflowでもいけるのでお好みで。

[defghi1977]

あー https://teratail.com/questions/120672 のひとだったか
作業する前にまずこのゴミとりから始めんとだめっぽいですね

[kszk311]

なぜ入るのか原因がわからないですね。
多分ツールの問題ですかね？

[sousuke]

質問とは関係なく純粋な興味なのですがkszk311氏のcssでセミコロンが2つあるのは何かの記法でしょうか？

[kszk311]

あ、いえ、ミスでした。
HTMLについては普段sublimeを使わないもので…。
ありがとうございます、直しておきますね。

[kato00]

みなさんご回答ありがとうございます！！
kszk311さんの回答で直りました！
制御文字、前からなぜか入ってしまって苦戦してたのですが、私もsublime textで開いてみたら制御文字の確認ができました。ご提示頂いたclearfixも正常に動きました！本当にいつもいつもありがとうございます！！

Answer 2

上でdefghi1977がおっしゃっていますがfloatをclearしてないのが原因だと思います。
ただ横に並べたいのであればflexを使ったほうがいいです。