Explication graphique et textuelle détaillée de float en CSS

Cette fois, je vais vous apporter une explication graphique et textuelle détaillée de float en CSS. Quelles sont les précautions pour l'explication graphique et textuelle détaillée de float Voici un cas pratique, jetons un coup d'œil. .

float et marge

Deux éléments flottants adjacents, lorsque la largeur du premier élément flottant (qu'il soit flottant à gauche ou à droite) est de 100 %, le deuxième élément flottant sera être pressé en dessous, et il peut être ramené à la première ligne en ajoutant une valeur margin-right négative (la valeur absolue est au moins égale à sa propre largeur).

Lors de l'écriture de code HTML, nous écrivons généralement le code de gauche à droite en fonction du style de l'interface utilisateur, mais parfois le contenu de droite est plus important, sa structure html doit donc être placée au-dessus du contenu sur à gauche, laissez-le se charger plus tôt, par exemple :

Disposition du flux à largeur fixe à gauche

<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%;
}

Comme le montre l'image ci-dessus, bien que l'élément .content se trouve sur le côté droit de .avatar dans l'interface utilisateur, nous devons toujours placer l'élément .content devant l'élément .avatar dans la structure HTML. Vous pouvez définir l'élément .content sur Float right, puis définir l'élément .avatar sur float gauche ou droit, puis ajouter une valeur de marge droite négative pour le ramener en haut.

1. Les côtés gauche et droit sont de largeur variable

Rendu :

Code HTML :

<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>

Point central :

L'élément .avatar flotte vers la gauche et l'attribut d'affichage de l'élément .content est défini sur table-cell. En fait, l'élément .content ici ne doit pas nécessairement définir l'affichage sur table-cell, tant que. il peut déclencher BFC/haslayout, par exemple :

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

Cependant, comme l'élément .content ici est adaptatif et ne peut pas avoir une largeur fixe, et qu'il contient des éléments de niveau bloc, vous ne pouvez définir que le débordement attribut.

Code CSS :

* {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. Disposition du flux à largeur fixe à droite

Rendu :

code html :

<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>

Points essentiels :

1 : Lorsque la largeur du premier élément flottant est de 100 %, le deuxième élément s'enroulera automatiquement à côté du. premier élément, vous pouvez ajouter une valeur de marge négative au deuxième élément flottant pour le faire monter

2 : Il y a un élément d'habillage à l'extérieur du .content du premier élément flottant, ce qui est pratique pour le .content element Ajoutez la valeur padding-right pour laisser un espace entre le contenu de gauche et l'image de droite

En fait, l'idée de la disposition à double aile volante comprend également les deux points ci-dessus.

Code CSS :

* {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;
}

Disposition fixe à trois colonnes des deux côtés et adaptative au milieu

Il existe désormais très peu de mises en page à trois colonnes. Si vous souhaitez les utiliser, veuillez accéder directement à la mise en page Baidu Double Flying Wing ou à la mise en page Holy Grail.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Implémentation CSS de la barre de navigation de premier niveau

Explication détaillée de l'utilisation du dégradé linéaire

Quatre méthodes de masquage en html+css

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!