กวดวิชาCSS

CSS HOME บทนำ CSS ไวยากรณ์ CSS ตัวเลือก CSS CSS วิธีการ ความคิดเห็น CSS CSS สี พื้นหลัง CSS CSS Borders CSS Margins CSS Padding CSS ความสูง/ความกว้าง โมเดลกล่อง CSS CSS Outline CSS Text แบบอักษร CSS ไอคอน CSS ลิงค์ CSS รายการ CSS ตาราง CSS จอแสดงผล CSS CSS ความกว้างสูงสุด ตำแหน่ง CSS CSS Z-ดัชนี CSS Overflow CSS Float CSS Inline-block CSS Align CSS Combinators CSS Pseudo-class CSS Pseudo-element CSS ความทึบ แถบนำทาง CSS CSS Dropdowns CSS Image Gallery CSS Image Sprites CSS Attr Selectors แบบฟอร์ม CSS CSS Counters เค้าโครงเว็บไซต์ CSS หน่วย CSS ความจำเพาะของ CSS CSS !สำคัญ ฟังก์ชันคณิตศาสตร์ CSS

CSS ขั้นสูง

CSS มุมโค้งมน รูปภาพ CSS Border พื้นหลัง CSS CSS สี คำหลักสี CSS CSS Gradients CSS Shadows เอฟเฟกต์ข้อความ CSS CSS Web Fonts การแปลง CSS 2D การแปลง CSS 3D การเปลี่ยน CSS ภาพเคลื่อนไหว CSS CSS Tooltips CSS สไตล์รูปภาพ ภาพสะท้อน CSS CSS วัตถุพอดี CSS วัตถุตำแหน่ง CSS Masking ปุ่ม CSS CSS Pagination CSS หลายคอลัมน์ ส่วนต่อประสานผู้ใช้ CSS ตัวแปร CSS ขนาดกล่อง CSS CSS Media Queries ตัวอย่าง CSS MQ CSS Flexbox

CSS Responsive

แนะนำ RWD วิวพอร์ต RWD RWD Grid View แบบสอบถามสื่อ RWD รูปภาพ RWD วิดีโอ RWD กรอบงาน RWD เทมเพลต RWD

CSS Grid

บทนำกริด คอนเทนเนอร์กริด รายการกริด

CSS SASS

กวดวิชา SASS

ตัวอย่างCSS

เทมเพลต CSS ตัวอย่าง CSS แบบทดสอบ CSS แบบฝึกหัด CSS ใบรับรอง CSS

การอ้างอิงCSS

การอ้างอิง CSS ตัวเลือก CSS ฟังก์ชัน CSS CSS อ้างอิง Aural CSS Web Safe Fonts CSS Animable หน่วย CSS ตัวแปลง CSS PX-EM CSS สี ค่าสี CSS ค่าดีฟอลต์ CSS รองรับเบราว์เซอร์ CSS

เค้าโครง CSS - ลอยและชัดเจน


คุณสมบัติ CSS floatระบุว่าองค์ประกอบควรลอยอย่างไร

คุณสมบัติ CSS clearระบุว่าองค์ประกอบใดสามารถลอยอยู่ข้างองค์ประกอบที่ถูกล้างและด้านใด




ทรัพย์สินลอยน้ำ

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

คุณสมบัติfloatสามารถมีค่าใดค่าหนึ่งต่อไปนี้:

  • left- องค์ประกอบลอยอยู่ทางด้านซ้ายของคอนเทนเนอร์
  • right- องค์ประกอบลอยไปทางขวาของคอนเทนเนอร์
  • none- องค์ประกอบไม่ลอย (จะแสดงเฉพาะตำแหน่งที่เกิดขึ้นในข้อความ) นี่คือค่าเริ่มต้น
  • inherit- องค์ประกอบสืบทอดค่าทศนิยมของพาเรนต์

ในการใช้งานที่ง่ายที่สุด สามารถใช้floatคุณสมบัตินี้เพื่อตัดข้อความรอบรูปภาพ


ตัวอย่าง - float: right;

ตัวอย่างต่อไปนี้ระบุว่ารูปภาพควรลอยไปทางขวาในข้อความ:

สัปปะรดความเจ็บปวดคือความรัก ซึ่งเป็นระบบจัดเก็บข้อมูลหลัก Phasellus imperdiet ไม่ใช่และบางครั้งก็พูด แต่ต้องการความเกลียดชัง Maecenas เป็นแฟนตัวยงพยาบาทและไม่ทำอาหารผู้เขียนชีวิตมวลชน การไว้ทุกข์ของส่วนโค้งของโลก Mauris ante ligula, facilisis sed ornare eu, lobortis ใน odio เป็นหุบเขาที่บางครั้งสามารถผลักดันทะเลสาบไปสู่การวางแผนเสียงหัวเราะได้ ตอนนี้มีแต่ลูกธนู แต่หมีแข็งมาก และ...

ตัวอย่าง

img {
  float: right;
}

ตัวอย่าง - ลอย: ซ้าย;

ตัวอย่างต่อไปนี้ระบุว่ารูปภาพควรลอยไปทางซ้ายในข้อความ:

สัปปะรดความเจ็บปวดคือความรัก ซึ่งเป็นระบบจัดเก็บข้อมูลหลัก Phasellus imperdiet ไม่ใช่และบางครั้งก็พูด แต่ต้องการความเกลียดชัง Maecenas เป็นแฟนตัวยงพยาบาทและไม่ทำอาหารผู้เขียนชีวิตมวลชน การไว้ทุกข์ของส่วนโค้งของโลก Mauris ante ligula, facilisis sed ornare eu, lobortis ใน odio เป็นหุบเขาที่บางครั้งสามารถผลักดันทะเลสาบไปสู่การวางแผนเสียงหัวเราะได้ ตอนนี้มีแต่ลูกธนู แต่หมีแข็งมาก และ...

ตัวอย่าง

img {
  float: left;
}

ตัวอย่าง - ไม่มีทุ่น

ในตัวอย่างต่อไปนี้ รูปภาพจะแสดงในตำแหน่งที่เกิดในข้อความ (float: none;):

สัปปะรด ความเจ็บปวดคือความรัก ซึ่งเป็นระบบจัดเก็บข้อมูลหลัก Phasellus imperdiet ไม่ใช่และบางครั้งก็พูด แต่ต้องการความเกลียดชัง Maecenas เป็นแฟนตัวยงพยาบาทและไม่ทำอาหารผู้เขียนชีวิตมวลชน ในการไว้ทุกข์ของโค้งของแผ่นดิน Mauris ante ligula, facilisis sed ornare eu, lobortis ใน odio เป็นหุบเขาที่บางครั้งดันจากทะเลสาบไปสู่การวางแผนเสียงหัวเราะ ถึงตอนนี้จะพูดแต่ลูกธนู แต่หมีแข็งมาก และ...

ตัวอย่าง

img {
  float: none;
}

ตัวอย่าง - ลอยตัวติดกัน

โดยปกติองค์ประกอบ div จะแสดงทับกัน อย่างไรก็ตาม หากเราใช้float: leftเราสามารถปล่อยให้องค์ประกอบลอยติดกันได้:

ตัวอย่าง

div {
  float: left;
  padding: 15px;
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}