;float nimona?

14403 ワード
CSS Webリリース html テキストリンク
floatの位置決め前にfloatを使用する理由を説明します.
さらに、flexboxとgridプロパティを位置決めします.

IE

내년 6월에 서비스가 종료된다고 아는데, 오래 버텼다 익스야
私が主にパズルを練習している間にflexでどうしたの?flexitemで横並びが簡単にできます!
でも僕らは🧟‍♂️) 目が開けられない.
cani useで確認し、IE 10からサポートを開始し、prefix-ms-が必要です.額にもバグがあります.ただし、通常は接頭辞を使用する必要がある場合がありますので、直接作成したほうがいいです.
can I use リンクテキスト

float vs absolut

float야 넌 뭐니?
float
:インライン要素の周囲を流れるように、左から右に移動できます.ユニットボックスは押し開かれません.
postion(absolut)
:通常のプロセスから完全に逸脱し、ページレイアウトにスペースを消費しない、すなわち前後の要素の影響を受けない.

差異

그렇다면 float 과 absolute의 큰 차이점이 뭘까?

나는 주변 요소의 영향을 줄 수 있냐 없냐로 본다.

浮動小数点を分解する方法


1.親要素をオーバーフロー:hiddenにfloatを分解する方法。


HTML
 <div class="wrap">
    <div class="item--lists">
      <div class="item__box">box1</div>
      <div class="item__box">box2</div>
      <div class="item__box">box3</div>
      <div class="item__box">box4</div>
    </div>
  </div>
CSS
.wrap{
  width:700px;
  height:auto;
  background-color:pink;
  padding:30px;  
}
.item--lists{
  width:100%;
  height:auto;
  /*overflow:hidden;*/
}
.item--lists > .item__box{
  float:left;
  
}
.item__box{
 width:150px;
 height:150px;
 text-align:center;
 line-height:150px;
}
.item__box:nth-child(1){
  background-color:red;
}
.item__box:nth-child(2){
  background-color:blue;
}
.item__box:nth-child(3){
  background-color:green;
}
.item__box:nth-child(4){
  background-color:yellow;
}
.item boxのfloatがfloatと宣言されると、通常のプロセスから飛び出し、親から飛び出します.

.item--リストオーバーフロー:非表示.親のサイズはitem box幅の高さに自動的に増加します.
🚨 부모요소한테 overflow:hidden을 주다보니 만약 부모 요소 크기가 고정 값이고,
 float이 선언 된 자식이 높이가 더 크다면 콘텐츠가 잘리는 문제점이 발생한다.

2.意味のないdivにclear:duthを宣言する


HTML
 <div class="wrap">
    <div class="item--lists">
      <div class="item__box">box1</div>
      <div class="item__box">box2</div>
      <div class="item__box">box3</div>
      <div class="item__box">box4</div>
      <div class="clearfix"></div>
    </div>
  </div>
CSS
.clearfix{
  clear:both;
}
.wrap{
  width:700px;
  height:auto;
  background-color:pink;
  padding:30px;  
}
형제 요소 중 마지막에 빈 요소를 작성하고 clear 해야 나머지 자식요소들이 제대로 정렬 됨
아무 의미 없는 빈 요소를 작성해야 하기 때문에 좋은 방법은 아님

3.親要素で仮想要素を作成して消去する方法


CSS

<.wrap{
.item--lists:affter{
  content:"";
  display:block;
  clear:both;
}
.item--lists{
  width:100%;
  height:auto;
  zoom:1;
}
.item--lists > .item__box{
  float:left;
  }
해당 방법이 가장 괜찮은 방법이라고 생각함.
빈 요소도 추가 할 필요도 없고 단 IE 5~6에서는 가상요소 선택자를 사용 할 수 없으며 float 버그가 발생한다.
haslayout이라는 트리거가 있으면 해결되는데 haslayout을 가지려면 먼저 zoom:1 값을 가져야함.
ft printf 6 1日目(置換...)
GetAdaptersAddressesアダプタ情報の取得