การใช้ float และ margin ร่วมกันใน CSS

ขณะนี้ข้อความของเราชิดกับรูปภาพทางด้านซ้าย ลองย้ายข้อความนี้ห่างออกไปเล็กน้อย ในการทำเช่นนี้ ให้กำหนด margin ซ้าย ให้กับย่อหน้าของเราที่ 30px และให้กับ div แม่ - เส้นขอบสีแดง

อย่างไม่คาดคิด ข้อความที่ห่างออกไปทางขวาจะมีเพียงข้อความ ที่ติดกับ div แม่เท่านั้น ส่วนข้อความ ที่ติดกับรูปภาพ - จะไม่ถูกย้าย:

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
}
img {
  float: left;
}

Результат:

เพื่อให้เข้าใจว่าทำไมถึงเป็นเช่นนั้น ลองเพิ่มเส้นขอบ สีเขียวให้กับย่อหน้า:

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
  border: 1px solid green;
}
img {
  float: left;
}

Результат:

อย่างที่เราเห็น จริงๆ แล้วย่อหน้าถูกย้ายออก จากขอบซ้าย แต่ไม่ใช่จากรูปภาพ แต่จาก div แม่ เพื่อดูรายละเอียดเพิ่มเติม ลองเพิ่ม ความโปร่งแสงให้รูปภาพผ่านคุณสมบัติ opacity:

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
  border: 1px solid green;
}
img {
  float: left;
  opacity: 0.5;
}

Результат:

ตอนนี้เห็นชัดเจนแล้วว่ามีปฏิกิริยาต่อ margin-left เพียงแต่ว่าย่อหน้าจริงๆ แล้วถูกวางอยู่ ใต้รูปภาพ ลองเอา margin ออก โดย ยังคงความโปร่งแสงของรูปภาพไว้:

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: left;
  opacity: 0.5;
}

Результат:

นี่คือลักษณะจริงของย่อหน้าของเรา - ข้อความของพวกมันถูกผลักโดยรูปภาพ แต่โดยทางกายภาพ ย่อหน้าอยู่ใต้รูปภาพ ซึ่งเห็นได้จาก เส้นขอบที่เริ่มจากขอบซ้าย ของ div แม่

ลองคืนค่า margin และใส่รูปภาพ ลงในย่อหน้าแรก:

html<div>
  <p>
    <img src="img.png" alt="">
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
  border: 1px solid green;
}
img {
  float: left;
  opacity: 0.5;
}

Результат:

ตอนนี้รูปภาพเลื่อนไปพร้อมกับย่อหน้าแล้ว!