浮動小数点数
浮動小数点数
float propertyは、本来、画像とテキストが存在する場合に、画像の周囲をテキストで囲むために作成されるものであり、以下の例に示す.
1.ソート
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<img src="https://poiemaweb.com/img/doug.jpg">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</body>
</html>
フローティングプロファイルが使用されていないブロック要素は垂直に配置されます.float:left; propertyを使用する場合は、左から右に揃え、float:right;propertyを使用する場合は、右から右に揃えます.
2. width
<!DOCTYPE html>
<html>
<head>
<style>
.box {
color: white;
font-weight: bold;
font-size: 30px;
line-height: 50px;
height: 50px;
margin: 0 10px;
padding: 10px;
}
.d1 {
float: left;
background: red;
}
.d2 {
background: orange;
}
</style>
</head>
<body>
<div class="box d1"> float: left; </div>
<div class="box d2"> div </div>
</body>
</html>
d 1クラス要素はfloat:left;d 2クラス要素にはfloatは宣言されていません.このとき、d 1クラス要素のwidthは、inline要素のように内容に応じて最小化され、次の要素d 2クラス要素の上に浮かぶ.
floatを使うのはinline-blockに似ていると思います.
だから私は2つの違いを探しました!
🤔 display:inline blockとfloat:leftの違いは?
1. float: left
<!DOCTYPE html>
<html>
<head>
<style>
.box {
color: white;
font-weight: bold;
font-size: 30px;
line-height: 50px;
height: 100px;
}
.d1 {
float: left;
background: red;
}
.d2 {
background: orange;
}
</style>
</head>
<body>
<div class="box d1"> float: left; </div>
<div class="box d1"> float: left; </div>
<div class="d2">iris like requiem honey sunrise melody laptop milky seraphic pure flora girlish marshmallow baby marshmallow twinkle flutter honey laptop droplet melody honey shine florence sunrise flutter blossom grapes droplet ice baby computer computer fabulous lucid computer flutter sunrise you haze haze droplet like eunoia iris twilight grapes droplet illusion cream.
lucy moonlight way blush carnival bijou purity carnival girlish lucid hello blossom iris kitten girlish serendipity girlish girlish seraphic hello haze lucy fascinating blush marshmallow cherish charming charming pure banana eunoia banana ideale blossom carnival bijou world twinkle haze honey masquerade seraphic blossom twilight illusion adolescence masquerade flutter blush computer.</div>
</body>
</html>
2. display: inline-block
<!DOCTYPE html>
<html>
<head>
<style>
.box {
color: white;
font-weight: bold;
font-size: 30px;
line-height: 50px;
height: 100px;
}
.d1 {
display: inline-block;
background: red;
}
.d2 {
background: orange;
}
</style>
</head>
<body>
<div class="box d1"> display: inline-block; </div>
<div class="box d1"> display: inline-block; </div>
<div class="d2">iris like requiem honey sunrise melody laptop milky seraphic pure flora girlish marshmallow baby marshmallow twinkle flutter honey laptop droplet melody honey shine florence sunrise flutter blossom grapes droplet ice baby computer computer fabulous lucid computer flutter sunrise you haze haze droplet like eunoia iris twilight grapes droplet illusion cream.
lucy moonlight way blush carnival bijou purity carnival girlish lucid hello blossom iris kitten girlish serendipity girlish girlish seraphic hello haze lucy fascinating blush marshmallow cherish charming charming pure banana eunoia banana ideale blossom carnival bijou world twinkle haze honey masquerade seraphic blossom twilight illusion adolescence masquerade flutter blush computer.</div>
</body>
</html>
💁 それに比べて、
1. float: left
ふどうもんだい
<!DOCTYPE html>
<html>
<head>
<style>
.container {
color: white;
text-align: center;
padding: 10px;
background-color: #def0c2;
}
.d1, .d2 {
float: left;
width: 50%;
padding: 20px 0;
}
.d1 {
background-color: #59b1f6;
}
.d2 {
background-color: #ffb5b4;
}
</style>
</head>
<body>
<div class="container">
<div class="d1">1</div>
<div class="d2">2</div>
</div>
<div style="background:red;padding:10px;color:white;">3</div>
</body>
</html>
まず、デフォルトでは、cssルールでは、親要素には子要素と同じ高さの領域があります.
しかし、3番divのレイアウトがおかしいことが確認できます.
🤔 どうしてこんなことになったの?
どうやって解決すればいいですか?
1.親要素の高さを指定
親は子供の身長をコントロールできないので、子供の身長と親の身長を一緒にします.ただし、このメソッドではサブエレメントに入るコンテンツの長さが決まりません.変更すると使用できません.!
2.
overflow: hidden親要素オーバーフロー:非表示の方法があります.この方法には親から離れた部分に見えない欠点もある.
3.
clear:bothfloat属性の要素を適用した後、要素にclear: bothを適用します.この方法をフローティング解除(clear)と呼ぶ.しかし、この方法にも問題があり、次の要因が変わると考えてみましょう.🥲
欠点は、次の要素を変更するたびにコードを変更することです.
floatが適用された要素とその親要素内でfloatが無効になっている場合にのみ、DOM間の依存性が解消され、floatが適用された次の要素ではなく、より良いコードだと考えられます.👍
div.nullという要素を作成し、依存性を解消するために
clear: bothのプロパティを与えます.しかし、DOMを単独で追加する方式であるため、不要な要素が発生し、HTML文書の可読性が低下するという欠点がある.
4.
::after 가상 요소 선택자最後に😊これはfloatターゲットの親要素にcssを使用して仮想要素を作成し、
clear: bothの属性を付与する方法です.個別のdomを作成する必要はなく、cssを使用するだけで、所与のfloatのグループから独立してfloatを解除することができます.
Reference
Reference
この問題について(浮動小数点数), 我々は、より多くの情報をここで見つけました https://velog.io/@zzi99/float-프로퍼티テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol