Detaillierte Grafik- und Texterklärung von Float in CSS

Dieses Mal werde ich Ihnen eine ausführliche Grafik- und Texterklärung von Float in CSS geben. Was sind die Vorsichtsmaßnahmen für die detaillierte Grafik- und Texterklärung von Float? .

Float und Rand

Zwei benachbarte Floating-Elemente. Wenn die Breite des ersten Floating-Elements (ob links oder rechts schwebend) 100 % beträgt, wird das zweite Floating-Element dies tun unten gedrückt werden, und es kann durch Hinzufügen eines negativen margin-right-Werts (der absolute Wert entspricht mindestens seiner eigenen Breite) wieder in die erste Zeile gebracht werden.

Beim Schreiben von HTML-Code schreiben wir normalerweise Code von links nach rechts entsprechend dem UI-Stil, aber manchmal ist der Inhalt auf der rechten Seite wichtiger, daher muss seine HTML-Struktur über dem Inhalt platziert werden links, lassen Sie es früher laden, z. B.:

Linkes Flusslayout mit fester Breite

<p class="comment">
    <!-- 右侧重要内容 -->
    <p class="content">
      <p class="author">
        <span class="name">哇哈哈</span>
        <span class="date">2016-78-55</span>
      </p>
      <p class="text">吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！</p>
      <p class="meta">
        <span class="msg-tag">赞</span>
        <span class="msg-tag">回复</span>
      </p>
    </p>
    <!-- 左侧内容 -->
    <a href="#" class="avatar"><img src="images/header.jpg" alt="头像"></a>
  </p>

* {margin:0; padding:0;}
li {list-style: none;}
a {text-decoration: none;}
body {font-family: '微软雅黑';}
.wrap {
  width: 800px;
  margin: 50px auto;
}
.content {
  float: right;
  margin-left: 100px;
}
.date {
  font-size: 14px;
  color: #666;
}
.text {
  margin: 20px 0;
}
.avatar {
  float: left;
  margin-right: -80px;
}
.avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

Wie im obigen Bild gezeigt, müssen wir, obwohl sich das .content-Element in der Benutzeroberfläche auf der rechten Seite von .avatar befindet, immer noch das .content-Element vor das .avatar-Element setzen. Zu diesem Zeitpunkt müssen wir Sie können das .content-Element auf Float right setzen, dann das .avatar-Element auf left oder right float setzen und dann einen negativen margin-right-Wert hinzufügen, um es wieder an den Anfang zu bringen.

1. Die linke und rechte Seite sind unterschiedlich breit

Rendering:

HTML-Code:

<p class="comment">
    <a href="#" class="avatar"><img src="images/header.jpg" alt="头像"></a>
    <p class="content">
      <p class="author">
        <span class="name">哇哈哈</span>
        <span class="date">2016-78-55</span>
      </p>
      <p class="text">吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！吃的再多也不长胖，好愁人啊，怎么能快速长胖呢，在线等，急！</p>
      <p class="meta">
        <span class="msg-tag">赞</span>
        <span class="msg-tag">回复</span>
      </p>
    </p>
  </p>

Kernpunkt:

Das .avatar-Element schwebt nach links und das Anzeigeattribut des .content-Elements ist auf table-cell gesetzt. Tatsächlich muss das .content-Element hier nicht unbedingt die Anzeige auf table-cell setzen, solange Es kann BFC/haslayout auslösen, zum Beispiel:

float:left/right
position:absolute/fixed
overflow:hidden/scroll(IE7+)
display:inline-block/table-cell(IE8+)

Da das .content-Element hier jedoch adaptiv ist und keine feste Breite haben kann und Elemente auf Blockebene enthält, können Sie nur den Überlauf festlegen Attribut.

CSS-Code:

* {margin:0; padding:0;}
li {list-style: none;}
a {text-decoration: none;}
body {font-family: '微软雅黑';}
.wrap {
  width: 800px;
  margin: 50px auto;
}
.avatar {
  float: left;
  margin-right: 20px;
}
.avatar img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
}
.content {
  display: table-cell;
}
.date {
  font-size: 14px;
  color: #666;
}
.text {
  margin: 20px 0;
}

2. Flusslayout mit fester Breite auf der rechten Seite

Rendering:

HTML-Code:

<p class="wrap">
  <ul class="list">
    <li class="item">
      <p class="content-wrap">
        <p class="content">
          <p class="author">
            <a href="#" class="avatar"><img src="images/header.jpg" alt="头像"></a>
            <span class="name">李荣浩</span>
            <span class="date">2016-01-22</span>
          </p>
          <a href="#" class="title">不将就</a>
          <p>互相折磨到白头 悲伤坚决不放手 开始纠缠之后 才又被人放大了自由 你的暴烈太温柔 感情又痛又享受 如果我说不吻你不罢休 谁能逼我将就</p>
          <p class="meta">
            <span class="category-tag">歌曲</span>
            <span class="msg-tag">喜欢·5000</span>
          </p>               
        </p>
      </p>
　　　
      <a href="#" class="thumbnail"><img src="images/pic.jpg" alt="图片"></a>   
    </li>
  </ul> 
</p>

Kernpunkte:

1: Wenn die Breite des ersten schwebenden Elements 100 % beträgt, wird das zweite Element automatisch umbrochen Als erstes Element können Sie dem zweiten schwebenden Element einen negativen Randwert hinzufügen, um es nach oben zu bringen

2: Es gibt ein umschließendes Element außerhalb des .content des ersten schwebenden Elements, was für den .content praktisch ist Element Fügen Sie den Wert padding-right hinzu, um eine Lücke zwischen dem Inhalt links und dem Bild rechts zu lassen

Tatsächlich beinhaltet die Idee des Double-Flying-Wing-Layouts auch die beiden oben genannten Punkte.

CSS-Code:

* {margin:0; padding:0;}
li {list-style: none;}
a {text-decoration: none;}
body {font-family: '微软雅黑';}
.wrap {
  width: 800px;
  margin: 50px auto;
}
.item {
  padding-bottom: 15px;
  border-bottom: 1px solid #ccc;
  overflow: hidden;
}
.content {
  float: left;
  padding-right: 180px;
}
.avatar {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  vertical-align: middle;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
}
.name {
  vertical-align: middle;
}
.date {
  font-size: 14px;
  color: #666;
  vertical-align: middle;
}
.title {
  display: block;
  padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
  line-height: 1.5;
  color: #333;
}
.thumbnail {
  float: left;
  margin-left: -120px;
}
.thumbnail img {
  width: 120px;
  height: 120px;
}
.meta {
  margin-top: 15px;
  font-size: 14px;
}
.category-tag {
  display: inline-block;
  padding: 0 8px;
  margin-right: 10px;
  border: 1px solid #ea6f5a;
  border-radius: 3px;
  color: #ea6f5a
}
.msg-tag {
  color: #999;
}

3. Dreispaltiges Layout auf beiden Seiten und adaptiv in der Mitte korrigiert

Es gibt derzeit nur sehr wenige dreispaltige Layouts. Wenn Sie diese verwenden möchten, gehen Sie bitte direkt zu Baidu Double Flying Wing Layout oder Holy Grail Layout.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

CSS-Implementierung der Navigationsleiste der ersten Ebene

Detaillierte Erläuterung der Verwendung von Linear-Gradient

Vier Versteckmethoden in HTML+CSS

Das obige ist der detaillierte Inhalt vonDetaillierte Grafik- und Texterklärung von Float in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!