) รายการ (

) และองค์ประกอบอื่นๆ

และตอนนี้เกี่ยวกับ

โอ้.

ตามที่กล่าวไว้ข้างต้น คุณสามารถกำหนดตำแหน่งขององค์ประกอบ HTML ใดก็ได้ ไม่จำเป็นต้องมีแท็กเสมอไปสำหรับสิ่งนี้

- นอกจากนี้ การใช้แท็กนี้ไม่ได้บังคับให้คุณต้องให้ตำแหน่งใดๆ บนหน้าเว็บ
ความหมายของการใช้บล็อกที่ระบุโดยแท็ก
ลงมาสู่การรวมตัว เพราะคุณสามารถวางองค์ประกอบอื่นๆ ไว้ข้างในได้ (ย่อหน้า รูปภาพ ฯลฯ) สิ่งนี้จะสร้างบล็อกขนาดใหญ่ที่มีเนื้อหาหลากหลาย ซึ่งทำให้ง่ายต่อการวางตำแหน่งบนหน้าเว็บมากกว่าแต่ละองค์ประกอบแยกกัน
การวางตำแหน่งขององค์ประกอบ
การวางตำแหน่งมีสี่ประเภทหลัก:
1. คงที่
2. แน่นอน
3. แก้ไขแล้ว
4. ญาติ)
คงที่
ใช้เป็นตำแหน่งเริ่มต้น ในกรณีนี้เบราว์เซอร์จะดูโค้ด HTML แบ่งออกเป็นองค์ประกอบและเขียนหน้าจากองค์ประกอบเหล่านั้น ผลลัพธ์ที่ได้คือลำดับขององค์ประกอบจำนวนหนึ่ง จะแสดงตามลำดับที่ระบุไว้ในโค้ด html
การใช้พารามิเตอร์ ซ้าย บน ขวา และล่างไม่นำไปสู่ผลลัพธ์ใดๆ
ต้องคำนึงถึงการวางตำแหน่งแบบคงที่เมื่อใช้การวางตำแหน่งแบบสัมพันธ์
แน่นอน
เมื่อใช้การวางตำแหน่งที่แน่นอน พิกัดของมุมซ้ายบนของบล็อกจะถูกระบุ ในกรณีนี้ พิกัดจะถูกนับโดยสัมพันธ์กับตำแหน่งขององค์ประกอบหลัก หากองค์ประกอบหลักคือหน้าต่างเบราว์เซอร์ บล็อกนั้นก็จะอยู่ในแนวสัมพันธ์กัน หากมีองค์ประกอบอื่นที่บล็อกตั้งอยู่ การจัดตำแหน่งจะเกิดขึ้นโดยสัมพันธ์กับองค์ประกอบนี้
ที่ตายตัว
จากชื่อเป็นที่ชัดเจนว่าในกรณีนี้องค์ประกอบได้รับการแก้ไขแล้ว ตั้งอยู่ในตำแหน่งเฉพาะบนหน้าเว็บและไม่ย้ายไปที่ใด การจัดแนวประเภทนี้มักใช้สำหรับป๊อปอัป โดยจะอยู่ตรงกลางและไม่เลื่อนเมื่อคุณเลื่อนหน้า
ญาติ
การวางตำแหน่งประเภทนี้อาจทำได้ยาก ชื่อของมันไม่เหมาะเลย หลายๆ คนสับสนระหว่างการวางตำแหน่งองค์ประกอบแบบสัมพัทธ์และแบบสัมบูรณ์ อาจปรากฏว่าการจัดตำแหน่งสัมพันธ์กับองค์ประกอบหลัก และในกรณีของการวางตำแหน่งที่แน่นอน - สัมพันธ์กับหน้าต่างเบราว์เซอร์ แต่นั่นไม่เป็นความจริง
มีความจำเป็นต้องเข้าใจว่าตำแหน่งขององค์ประกอบในกรณีนี้เกิดขึ้นสัมพันธ์กับตำแหน่งขององค์ประกอบในตำแหน่งคงที่ นี่คือสิ่งที่กล่าวมาข้างต้น
พูดง่ายๆ ก็คือ คุณบอกให้เบราว์เซอร์ย้ายองค์ประกอบจำนวนพิกเซลมากโดยสัมพันธ์กับตำแหน่งที่องค์ประกอบนั้นอยู่ตามค่าเริ่มต้น
มีอีกจุดที่ยาก จะเกิดอะไรขึ้นหากองค์ประกอบหลักมีตำแหน่งที่สัมพันธ์กัน แต่องค์ประกอบที่ซ้อนกันมีตำแหน่งที่แน่นอน ในกรณีนี้ พิกัดขององค์ประกอบลูกจะถูกนับโดยสัมพันธ์กับองค์ประกอบหลัก โดยคำนึงถึงออฟเซ็ตขององค์ประกอบนั้น ถ้ามี
มาสรุปกัน
จึงมีทรัพย์สมบัติ ตำแหน่ง- คุณสมบัตินี้รับได้ 4 ค่า คงที่ สัมบูรณ์ คงที่ และสัมพันธ์กัน- ค่าเริ่มต้นคือ คงที่.
เมื่อคุณระบุพิกัดสำหรับองค์ประกอบ คุณต้องบอกเบราว์เซอร์ด้วยว่าควรคำนวณพิกัดเหล่านั้นอย่างไร เราต้องให้จุดเริ่มต้นแก่เขา
อย่าลืมว่าหากไม่มีทรัพย์สิน ตำแหน่งพิกัดจะไม่ถูกนำมาพิจารณา บล็อกจะยังคงอยู่ในตำแหน่งเดิมในตำแหน่งคงที่


ตอนนี้เรามาดูวิธีการตั้งค่าพิกัดกัน
เพื่อวัตถุประสงค์เหล่านี้ มีการใช้คุณสมบัติสี่ประเภท:
1. ด้านบน
2.ซ้าย
3.ขวา
4. ด้านล่าง
สูงสุด- ค่าบวก (เช่น 20px) จะย้ายบล็อกลง 20 พิกเซล ค่าลบ (-20px) จะย้ายองค์ประกอบขึ้น 20 พิกเซล ทั้งหมดนี้เกิดขึ้นสัมพันธ์กับมุมซ้ายบน
ซ้าย- เลื่อนไปทางซ้ายหรือขวาขึ้นอยู่กับป้าย สัมพันธ์กับมุมซ้ายบน
ขวา- เลื่อนไปทางขวาและซ้ายขึ้นอยู่กับป้าย สัมพันธ์กับมุมขวาบน
ด้านล่าง- เลื่อนขึ้นหรือลงขึ้นอยู่กับป้าย เกิดขึ้นสัมพันธ์กับมุมซ้ายล่าง
นี่คือโค้ด HTML:







และนี่คือ CSS:
#1 {
ตำแหน่ง:ญาติ;
ด้านบน:100px;
ซ้าย:100px;
ความกว้าง:500px;
ความสูง:500px;
สีพื้นหลัง:#CCCCCC;
}
#11 {
สีพื้นหลัง:#003399;
ตำแหน่ง:แน่นอน;
ด้านล่าง: -30px;
ขวา: -50px;
ความกว้าง:100px;
ความสูง:100px;
}
#2 {
สีพื้นหลัง:#990066;
ความกว้าง:200px;
ความสูง:300px
}
ฝึกฝน.
ในขณะที่ฉันกำลังเขียนอยู่ฉันก็คิดออกเอง
เครื่องมือหลักสองอย่างมักใช้สำหรับการจัดวางหน้า - การวางตำแหน่งและ การเคลื่อนไหวอย่างอิสระ (ลอยตัว)- การวางตำแหน่ง CSS ช่วยให้คุณระบุตำแหน่งที่กล่องขององค์ประกอบปรากฏ และ Free Float จะย้ายองค์ประกอบไปที่ขอบซ้ายหรือขวาของกล่องคอนเทนเนอร์ ทำให้เนื้อหาที่เหลือ "ไหล" ไปรอบๆ ได้
การวางตำแหน่งและการเคลื่อนไหวขององค์ประกอบอย่างอิสระ
1. ประเภทของตำแหน่ง
คุณสมบัติตำแหน่งช่วยให้คุณสามารถระบุตำแหน่งใหม่ของบล็อกได้อย่างแม่นยำโดยสัมพันธ์กับตำแหน่งที่จะอยู่ในโฟลว์ปกติของเอกสาร ตามค่าเริ่มต้น องค์ประกอบทั้งหมดจะถูกจัดเรียงตามลำดับตามลำดับที่กำหนดไว้ในโครงสร้างของเอกสาร HTML ทรัพย์สินไม่ได้รับมรดก
ตำแหน่ง
ความหมาย:
คงที่	ค่าเริ่มต้นหมายถึงไม่มีการวางตำแหน่ง องค์ประกอบต่างๆ จะถูกแสดงตามลำดับตามลำดับที่กำหนดไว้ในเอกสาร HTML ใช้เพื่อล้างค่าตำแหน่งอื่นๆ
ญาติ	องค์ประกอบที่มีตำแหน่งค่อนข้างถูกย้ายจากตำแหน่งปกติในทิศทางที่แตกต่างกันโดยสัมพันธ์กับขอบเขตของคอนเทนเนอร์หลัก แต่พื้นที่ที่องค์ประกอบนั้นไม่หายไป อย่างไรก็ตาม องค์ประกอบดังกล่าวอาจซ้อนทับเนื้อหาอื่นบนเพจ หากสำหรับองค์ประกอบที่มีตำแหน่งค่อนข้างสูงคุณตั้งค่าคุณสมบัติด้านบนและด้านล่างหรือซ้ายและขวาในเวลาเดียวกัน ในกรณีแรกเฉพาะด้านบนเท่านั้นที่จะใช้งานได้ ในวินาทีที่สอง - ซ้าย การวางตำแหน่งแบบสัมพัทธ์ช่วยให้คุณสามารถตั้งค่าดัชนี z สำหรับองค์ประกอบได้ เช่นเดียวกับการวางตำแหน่งองค์ประกอบย่อยภายในบล็อก
แน่นอน	องค์ประกอบที่มีตำแหน่งที่แน่นอนจะถูกลบออกจากการไหลของเอกสารโดยสมบูรณ์ และอยู่ในตำแหน่งที่สัมพันธ์กับขอบเขตของบล็อกคอนเทนเนอร์ (องค์ประกอบอื่นหรือหน้าต่างเบราว์เซอร์) บล็อกคอนเทนเนอร์สำหรับองค์ประกอบที่มีตำแหน่งที่แน่นอนคือองค์ประกอบบรรพบุรุษที่ใกล้เคียงที่สุดซึ่งค่าคุณสมบัติตำแหน่งไม่คงที่ ตำแหน่งของขอบขององค์ประกอบถูกกำหนดโดยใช้คุณสมบัติออฟเซ็ต พื้นที่ที่องค์ประกอบดังกล่าวครอบครองจะยุบลงราวกับว่าไม่มีองค์ประกอบนั้นอยู่บนเพจ องค์ประกอบที่มีตำแหน่งที่แน่นอนสามารถซ้อนทับหรือถูกองค์ประกอบอื่นๆ ทับได้ (เนื่องจากคุณสมบัติดัชนี z) องค์ประกอบใด ๆ ที่อยู่ในตำแหน่งที่แน่นอนจะสร้างบล็อก กล่าวคือ จะใช้กับค่า display: block; -
ที่ตายตัว	แก้ไของค์ประกอบในตำแหน่งที่ระบุบนเพจ บล็อกคอนเทนเนอร์ขององค์ประกอบคงที่คือวิวพอร์ต นั่นคือองค์ประกอบจะคงที่โดยสัมพันธ์กับหน้าต่างเบราว์เซอร์เสมอ และไม่เปลี่ยนตำแหน่งในขณะที่เลื่อนหน้า องค์ประกอบจะถูกลบออกจากโฟลว์เอกสารหลักโดยสิ้นเชิง และสร้างขึ้นในโฟลว์เอกสารใหม่
อักษรย่อ	ตั้งค่าคุณสมบัติให้เป็นค่าเริ่มต้น
สืบทอด	สืบทอดค่าคุณสมบัติจากองค์ประกอบหลัก

ข้าว. 1. ความแตกต่างระหว่างการวางตำแหน่งแบบคงที่ แบบสัมพันธ์ และแบบสัมบูรณ์
2. คุณสมบัติออฟเซ็ต
คุณสมบัติอธิบายออฟเซ็ตที่สัมพันธ์กับด้านที่ใกล้ที่สุดของบล็อกคอนเทนเนอร์ ตั้งค่าสำหรับองค์ประกอบที่ค่าคุณสมบัติตำแหน่งไม่คงที่ สามารถรับได้ทั้งค่าบวกและค่าลบ ไม่ได้รับมรดก
สำหรับคุณสมบัติด้านบน ค่าบวกจะย้ายขอบด้านบนขององค์ประกอบที่อยู่ในตำแหน่งด้านล่าง และค่าลบจะย้ายขอบด้านบนของบล็อกคอนเทนเนอร์ สำหรับคุณสมบัติด้านซ้าย ค่าบวกจะย้ายขอบขององค์ประกอบที่อยู่ในตำแหน่งไปทางขวา และค่าลบจะเลื่อนขอบขององค์ประกอบที่อยู่ในตำแหน่งไปทางซ้าย นั่นคือค่าบวกจะย้ายองค์ประกอบภายในบล็อกคอนเทนเนอร์และค่าลบจะย้ายองค์ประกอบไปด้านนอก
3. การวางตำแหน่งภายในองค์ประกอบ
สำหรับบล็อกคอนเทนเนอร์ขององค์ประกอบที่มีตำแหน่งที่แน่นอน ตำแหน่ง: คุณสมบัติสัมพัทธ์จะถูกตั้งค่าโดยไม่มีออฟเซ็ต ซึ่งช่วยให้องค์ประกอบสามารถวางตำแหน่งภายในองค์ประกอบคอนเทนเนอร์ได้
.wrap ( ช่องว่างภายใน: 10px; ความสูง: 150px; ตำแหน่ง: ญาติ; พื้นหลัง: #e7e6d4; การจัดแนวข้อความ: ขวา; เส้นขอบ: 3px ประ #645a4e; ) .white ( ตำแหน่ง: สัมบูรณ์; ความกว้าง: 200px; ด้านบน: 10px; ซ้าย : 10px; การขยาย: 10px; พื้นหลัง: #ffffff; เส้นขอบ: 3px ประ #312a22;
ข้าว. 2. ตำแหน่งสัมพัทธ์สัมบูรณ์
4. ปัญหาการวางตำแหน่ง
1. หากตั้งค่าความกว้างหรือความสูงขององค์ประกอบในตำแหน่งที่แน่นอนเป็น auto ค่าจะถูกกำหนดโดยความกว้างหรือความสูงของเนื้อหาขององค์ประกอบ หากมีการประกาศความกว้างหรือความสูงอย่างชัดเจน นี่คือค่าที่จะกำหนด
2. หากภายในบล็อกที่มีตำแหน่ง: สัมบูรณ์ มีองค์ประกอบที่ตั้งค่าการลอยตัว ความสูงขององค์ประกอบนี้จะเท่ากับความสูงขององค์ประกอบที่สูงที่สุดเหล่านี้
3. สำหรับองค์ประกอบที่มีตำแหน่ง: สัมบูรณ์หรือตำแหน่ง: คงที่ คุณไม่สามารถตั้งค่าคุณสมบัติ float พร้อมกันได้ แต่สำหรับองค์ประกอบที่มีตำแหน่ง: สัมพันธ์ คุณสามารถทำได้
4. หากบรรพบุรุษขององค์ประกอบที่อยู่ในตำแหน่งเป็นองค์ประกอบบล็อก คอนเทนเนอร์บล็อกจะถูกสร้างขึ้นตามพื้นที่เนื้อหาที่คั่นด้วยเส้นขอบ หากบรรพบุรุษเป็นองค์ประกอบแบบอินไลน์ บล็อกคอนเทนเนอร์จะถูกสร้างขึ้นตามขอบเขตด้านนอกของเนื้อหา หากไม่มีบรรพบุรุษ บล็อกคอนเทนเนอร์จะเป็นองค์ประกอบเนื้อหา
5. การเคลื่อนไหวขององค์ประกอบอย่างอิสระ
ในลำดับปกติ องค์ประกอบบล็อกจะแสดงผลโดยเริ่มจากขอบด้านบนของหน้าต่างเบราว์เซอร์และทำงานไปทางขอบด้านล่าง คุณสมบัติ float ช่วยให้คุณสามารถย้ายองค์ประกอบใด ๆ โดยจัดตำแหน่งให้ชิดขอบซ้ายหรือขวาของหน้าเว็บหรือองค์ประกอบคอนเทนเนอร์ที่ประกอบด้วยองค์ประกอบนั้น ในกรณีนี้ องค์ประกอบบล็อกอื่นๆ จะเพิกเฉย และองค์ประกอบในบรรทัดจะย้ายไปทางขวาหรือซ้าย เพื่อเพิ่มพื้นที่ว่างและไหลไปรอบๆ
ข้าว. 3. การเคลื่อนไหวขององค์ประกอบอย่างอิสระ
บล็อกแบบลอยใช้มิติของเนื้อหา โดยคำนึงถึงช่องว่างภายในและเส้นขอบ ขอบด้านบนและด้านล่างขององค์ประกอบแบบลอยไม่ยุบ คุณสมบัติ float ใช้กับทั้งองค์ประกอบบล็อกและองค์ประกอบแบบอินไลน์
ขอบด้านนอกด้านซ้ายหรือขวาขององค์ประกอบที่ถูกย้าย ต่างจากองค์ประกอบที่มีตำแหน่ง ไม่สามารถวางไปทางซ้าย (หรือขวา) ของขอบด้านในของบล็อกคอนเทนเนอร์ได้ เช่น ก้าวข้ามขอบเขตของมัน นอกจากนี้ หากมีการระบุช่องว่างภายในสำหรับคอนเทนเนอร์บล็อก บล็อกลอยจะมีระยะห่างจากขอบของคอนเทนเนอร์บล็อกตามระยะทางที่กำหนด
คุณสมบัติจะเปลี่ยนค่าที่คำนวณ (แสดงเบราว์เซอร์) ของคุณสมบัติการแสดงผลโดยอัตโนมัติเพื่อแสดง: บล็อกสำหรับค่าต่อไปนี้: inline , inline-block , table-row , table-row-group , table-column , table-column-group , ตารางเซลล์ ค่าของการเปลี่ยนแปลงตารางอินไลน์เป็นตาราง
คุณสมบัติไม่มีผลกระทบต่อองค์ประกอบที่มี display: flex และ display: inline-flex
เมื่อใช้คุณสมบัติ float กับองค์ประกอบบล็อก ต้องแน่ใจว่าได้ระบุความกว้าง สิ่งนี้จะสร้างพื้นที่สำหรับเนื้อหาอื่นในเบราว์เซอร์ แต่ถ้าความกว้างรวมของคอลัมน์ทั้งหมดมากกว่าพื้นที่ว่าง องค์ประกอบสุดท้ายจะลดลง
ในเวลาเดียวกัน ขอบแนวตั้งขององค์ประกอบแบบลอยจะไม่ยุบลงพร้อมกับระยะขอบขององค์ประกอบข้างเคียง ซึ่งแตกต่างจากองค์ประกอบบล็อกทั่วไป
6. ยกเลิกการไหลรอบองค์ประกอบ
6.1. ทรัพย์สินที่ชัดเจน
คุณสมบัติที่ชัดเจนจะกำหนดว่าองค์ประกอบที่ตามหลังองค์ประกอบลอยตัวจะถูกวางตำแหน่งอย่างไร คุณสมบัติยกเลิกการลอยบนด้านใดด้านหนึ่งหรือทั้งสองด้านขององค์ประกอบที่กำหนดโดยคุณสมบัติลอย หากต้องการป้องกันไม่ให้พื้นหลังหรือเส้นขอบแสดงใต้องค์ประกอบแบบลอย ให้ใช้กฎ (overflow: ซ่อนเร้น;)
6.2. การทำความสะอาดสตรีมด้วยสไตล์โดยใช้คลาส clearfix และ :after คลาสหลอก
สมมติว่าคุณมีคอนเทนเนอร์บล็อกที่ไม่ได้ระบุความกว้างและความสูง บล็อกลอยที่มีขนาดที่ระบุจะถูกวางไว้ข้างใน
.container ( padding: 20px; พื้นหลัง: #e7e6d4; border: 3px dashed #645a4e; ) .floatbox ( float: left; width: 300px; height: 150px; margin-right: 20px; padding: 0 20px; พื้นหลัง: #ffffff ; ขอบ: 3px ประ #666666; ข้าว. 4. “เอฟเฟกต์การยุบ” ของบล็อกคอนเทนเนอร์
สารละลาย:
เราสร้างคลาส .clearfix และเมื่อใช้ร่วมกับคลาสหลอก :after ให้นำไปใช้กับคอนเทนเนอร์บล็อก
.container ( padding: 20px; พื้นหลัง: #e7e6d4; border: 3px dashed #645a4e; ) .floatbox ( float: left; width: 300px; height: 150px; margin-right: 20px; padding: 0 20px; พื้นหลัง: #ffffff ; เส้นขอบ: 3px ประ #666666; .clearfix:after ( เนื้อหา: ""; จอแสดงผล: บล็อก; ความสูง: 0; ชัดเจน: ทั้งสอง; การมองเห็น: ซ่อนเร้น; )
ตัวเลือกที่สองสำหรับการล้างสตรีม:
Clearfix:หลัง (เนื้อหา: ""; แสดง: ตาราง; ชัดเจน: ทั้งสอง; )
ข้าว. 5. การใช้วิธี "ทำความสะอาด" กับบล็อกคอนเทนเนอร์ที่มีองค์ประกอบลอยตัว
6.3. วิธีง่ายๆ ในการทำความสะอาดสตรีม
มีเคล็ดลับอีกอย่างหนึ่งในการล้างโฟลว์สำหรับองค์ประกอบที่มีองค์ประกอบลอย เช่น รายการสัญลักษณ์แสดงหัวข้อย่อยแนวนอน:
Ul ( ระยะขอบ: 0; สไตล์รายการ: ไม่มี; การขยาย: 20px; พื้นหลัง: #e7e6d4; ล้น: อัตโนมัติ; ) li ( ลอย: ซ้าย; ความกว้าง: คำนวณ (100% / 3 - 20px); ความสูง: 50px; ระยะขอบ- ขวา: 20px; พื้นหลัง: #ffffff; เส้นขอบ: 3px ประ #666666; ) li:last-child (ระยะขอบ-ขวา: 0;) 6. ทำความสะอาดโฟลว์รายการแนวนอน
หนึ่งในสิ่งที่ดีที่สุดเกี่ยวกับ CSS คือสไตล์ทำให้เราสามารถวางตำแหน่งเนื้อหาและองค์ประกอบบนเพจได้แทบทุกวิถีทางเท่าที่จะจินตนาการได้ สิ่งนี้จะเพิ่มโครงสร้างให้กับการออกแบบของเราและช่วยทำให้เนื้อหามีภาพมากขึ้น
การวางตำแหน่งใน CSS มีหลายประเภท แต่ละประเภทมีขอบเขตของตัวเอง ในบทนี้ เราจะดูกรณีการใช้งานที่แตกต่างกันสองสามกรณี — การสร้างเลย์เอาต์ที่นำมาใช้ซ้ำได้ และการวางตำแหน่งองค์ประกอบแบบใช้แล้วทิ้งที่ไม่ซ้ำกัน — รวมถึงการอธิบายวิธีการบางอย่างในการดำเนินการดังกล่าว
การวางตำแหน่งผ่านการลอย
วิธีหนึ่งในการวางตำแหน่งองค์ประกอบบนเพจคือผ่านคุณสมบัติ float คุณสมบัตินี้ค่อนข้างหลากหลายและสามารถใช้งานได้หลายวิธี
โดยพื้นฐานแล้ว คุณสมบัติ float จะรับองค์ประกอบ ลบออกจากโฟลว์ปกติของเพจ และวางตำแหน่งไว้ทางซ้ายหรือขวาขององค์ประกอบหลัก องค์ประกอบอื่นๆ ทั้งหมดในหน้าจะล้อมรอบองค์ประกอบดังกล่าว ตัวอย่างเช่น ย่อหน้าจะล้อมรอบรูปภาพหากเป็นองค์ประกอบ ตั้งค่าคุณสมบัติ float แล้ว
เมื่อใช้คุณสมบัติ float กับองค์ประกอบหลายรายการพร้อมกัน จะทำให้สามารถสร้างเลย์เอาต์ที่มีองค์ประกอบลอยอยู่ติดกันหรือตรงข้ามกัน ดังที่แสดงในโครงร่างแบบหลายคอลัมน์
คุณสมบัติ float รับค่าหลายค่า โดยค่าที่ได้รับความนิยมมากที่สุด 2 ค่าคือค่าซ้ายและขวา ซึ่งทำให้องค์ประกอบลอยไปทางซ้ายหรือขวาของค่าแม่
Img ( ลอย: ซ้าย; )
ลอยในทางปฏิบัติ
เรามาสร้างเค้าโครงหน้าทั่วไปโดยมีส่วนหัวอยู่ด้านบน สองคอลัมน์ตรงกลาง และส่วนท้ายอยู่ที่ด้านล่าง ตามหลักการแล้ว หน้านี้ควรมาร์กอัปด้วยองค์ประกอบต่างๆ
,
,