Monday, 15 July 2024

Float ให้กล่องลอยอยู่เหนือ element ใน css

28 Apr 2018
108
luminox watches

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

Float ให้กล่องลอยอยู่เหนือ element ใน css

Float ให้กล่องลอยอยู่เหนือ element ใน css

ตัวอย่างการใช้ Float ใน CSS สามารถเขียนได้ดังนี้:

 

<div style=”float: left; width: 70%;”>
ส่วนนี้จะถูกจัดหน้าไปทางซ้าย
</div>

<div style=”float: right; width: 30%;”>
ส่วนนี้จะถูกจัดหน้าไปทางขวา
</div>

 

ในตัวอย่างข้างต้น เราใช้ float เพื่อจัดหน้าไปทางซ้ายหรือขวาของพื้นที่ที่กำหนดไว้ โดยตัวอย่างนี้จะแสดงผลเป็น 2 กล่องซึ่งจะอยู่ซ้ายและขวาของหน้าจอ โดยกำหนดความกว้างของแต่ละกล่องเป็น 70% 30% ของพื้นที่ทั้งหมดที่ถูกกำหนดไว้
ถ้ากำหนดกล่องใหม่ขึ้นมา จะเข้ามาแทนที่ สองกล่องที่จัดไว้ด้านซ้ายและขวาทันที เปรียบเสมือว่า เราเซ็ตกล่องให้ลอยอยู่ถ้าจะกำหนดกล่องใหม่ไม่ให้แทนที่พื้นที่ทั้ง 2 กล่องที่กำหนดไว้ให้ใช้ clear float

Clear ใน CSS ใช้เพื่อกำหนดว่า element ต้องลบ float ขององค์ประกอบก่อนหน้าเพื่อให้เนื้อหาหรือองค์ประกอบถัดไปขึ้นไปอยู่บรรทัดใหม่และไม่ติดกับองค์ประกอบก่อนหน้าที่มี float อยู่

ตัวอย่างการใช้ Clear ใน CSS สามารถเขียนได้ดังนี้:

 

<div style=”float: left; width: 50%;”>
ส่วนนี้จะถูกจัดหน้าไปทางซ้าย
</div>

<div style=”clear: both;”></div> <!– ใช้ Clear ในการลบ float ขององค์ประกอบก่อนหน้า –>
<div style=”width: 100%;”>
ส่วนนี้จะอยู่บรรทัดใหม่เนื่องจากมีการใช้ clear ใน element ก่อนหน้า
</div>

 

Thanat Sirikitphattana

แบ่งปันกัน เราอยู่กันไม่เกิน 100 ปีหรอกครับ
สุดท้ายก็ทิ้งไว้ที่โลก จะคงเหลือไว้แต่คุณงามความดีที่ให้ระลึกถึงกันครับ

Follow Us / Thanat Sirikitphattana