フロートのクリアの問題について説明してください~~_html/css_WEB-ITnose

.clear{clear:both;}

と

.clear{ clear:both;}.clear:after{	clear: both;    content: "";    display: block;}

前者の意味はわかりますが、後者の意味は、ul の li のフロートをクリアするために後者を適用すると明らかであることがわかりました。
以下の私の CSS コードを見てください

.bookrack_content_ul { width: 100%; background:url(../images/indexPage/ul_bg.png) repeat;}.bookrack_content_li { float: left; margin-top:36px; margin-left:37px; margin-bottom:11px;}

効果:
フロートをクリアしない場合、UL に追加された背景は 1 行のみ表示されます。li のコンテンツの長さが 100% を超えると、新しい行にラップされます。線なので、下に背景はありません。クリア後​​、ブラウザを拡大するにはどうすればよいですか？

ディスカッションへの返信（解決策）

float がクリアされていない場合、ul は浮動子要素 li を完全に「ラップ」できません。 Floating li はドキュメント フローから切り離され、ui によってラップされません。
ul が Clear float を使用する場合、ul は浮動サブ要素 li を「ラップ」できるため、改行後も li には背景が残ります。

float がクリアされていない場合、ul は浮動子要素 li を完全に「ラップ」できません。 Floating li はドキュメント フローから切り離され、ui によってラップされません。
ul が Clear float を使用する場合、ul は浮動サブ要素 li を「ラップ」できるため、改行後も li には背景が残ります。
では、clear:both を直接使用できますか?

疑似クラスを使用せずに、clear:both を直接使用する場合は、ui で使用できます。同じレベルの li を追加し、この空の li で clear:both を使用すると、同じ効果が得られます。これは次のコードのようなものです:

<div class="wrapper">	<ul class="bookrack_content_ul">		<li class="bookrack_content_li">aaa</li>		<li class="bookrack_content_li">aaa</li>		<li class="bookrack_content_li">aaa</li>		<li class="clearfix"></li><!--注意clearfix是用在这个地方的,在去掉伪类的情况下也可以正常使用！！！-->	</ul></div>

ul では、疑似クラスを使用することは、clear:both を使用してデフォルトで ul に要素を追加することと同等です

<div class="wrapper">	<ul class="bookrack_content_ul clearfix"><!--注意clearfix是用在这个地方的，需要使用伪类才可以使用-->		<li class="bookrack_content_li">aaa</li>		<li class="bookrack_content_li">aaa</li>		<li class="bookrack_content_li">aaa</li>	</ul></div>

疑似クラスを使用しない場合は、clear:both を直接使用してください. の場合、空の li を ui に、つまり li の同じレベルに追加し、この空の li で clear:both を使用すると、同じ効果を得ることができます。次のコードのようなものです:

<div class="wrapper">	<ul class="bookrack_content_ul">		<li class="bookrack_content_li">aaa</li>		<li class="bookrack_content_li">aaa</li>		<li class="bookrack_content_li">aaa</li>		<li class="clearfix"></li><!--注意clearfix是用在这个地方的,在去掉伪类的情况下也可以正常使用！！！-->	</ul></div>

ul では、疑似クラス メソッドを使用することは、clear:both を使用してデフォルトで ul に要素を追加することと同じです

<div class="wrapper">	<ul class="bookrack_content_ul clearfix"><!--注意clearfix是用在这个地方的，需要使用伪类才可以使用-->		<li class="bookrack_content_li">aaa</li>		<li class="bookrack_content_li">aaa</li>		<li class="bookrack_content_li">aaa</li>	</ul></div>

ありがとうございます