[CSS] float: left, right, both

CSSでフローティング属性のファイルをクリアします。

画像の左右にテキストを囲むシンプルなレイアウトを実現

画像とテキストは現在別々に配置されています

<div><img src="html.jpg"></div>
<p>
    HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는
    프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 
    있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.
    이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다.
</p>

1.固定画像と流入テキストがあり、float属性を固定画像に適用する

2.左右を指定でき、float:left;or float:right; 指定

<div><img src="html.jpg"></div>
<p>
    HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는
    프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 
    있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.
    이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다.
</p>
<sytle>
div {
float:left;
}
</style>

画像がテキストより大きい場合は、他のコンテンツとブレンドして使用できます。

<div><img src="html.jpg"></div>
<p>
    HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는
    프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 
    있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.
    이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다.
</p>
<p>
   CSS는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로[1],
   HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. 
   W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.
</p>
<sytle>
div {
float:left;
}
</style>

1.CSS記述のテキスト内容を分離する場合は、分離する内容にclear属性を使用します。

2. float:left;inコンテンツと分離したい場合はclear:left;

3. float:right;incontentsと分離したい場合はclear:right;

4.floatを左または右に分離したい場合は、clear:どちらでもいいです。

<div><img src="html.jpg"></div>
<p>
    HTML (Hypertext Markup Language,하이퍼텍스트 마크업 언어)는
    프로그래밍 언어는 아니고, 우리가 보는 웹페이지가 어떻게 구조화되어 
    있는지 브라우저로 하여금 알 수 있도록 하는 마크업 언어입니다.
    이는 개발자로 하여금 복잡하게도 간단하게도 프로그래밍 할 수 있습니다.
</p>
<p class="css">
   CSS는 마크업 언어가 실제 표시되는 방법을 기술하는 언어로[1],
   HTML과 XHTML에 주로 쓰이며, XML에서도 사용할 수 있다. 
   W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다.
</p>
<sytle>
div {
float:left;
}
.css {
clear:left;
}
</style>