[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"site-config":3,"course-tree":6,"topic:float-and-clear":646,"blog-categories":758},{"data":4},{"google_site_verification":5,"ga4_measurement_id":5,"site_name":5,"default_og_image":5,"twitter_handle":5},null,{"data":7},[8,334],{"id":9,"name":10,"slug":11,"icon":5,"icon_url":5,"short_description":12,"meta_title":13,"meta_description":14,"og_image":15,"locale":16,"subcategories":17},1,"HTML","html-tutorial","Welcome to our HTML Tutorial for Beginners, a complete guide designed to help you learn HTML from the ground up.\n\nHTML, which stands for HyperText Markup Language, is the standard language used to structure content on the web. Whether you want to become a web developer, build your own website, or continue learning CSS and JavaScript, understanding HTML is an essential first step.\n\nThis HTML course takes you through the fundamentals step by step, using simple explanations and practical examples. ","HTML Tutorial for Beginners - Learn HTML Step by Step","Learn HTML from scratch with our beginner-friendly HTML tutorial. Understand HTML tags, elements, forms, tables, links, images, semantic HTML and more with practical examples.","https:\u002F\u002Fwpfsharp.com\u002Fstorage\u002Fcourses\u002Fog\u002F01M2GK0XN45C0B937NF9XFAD4S.webp","en",[18,46,82,106,182,216,230,258,282,298],{"id":9,"name":19,"slug":20,"order_index":9,"topics":21},"HTML Fundamentals & Setup","html-fundamentals-setup",[22,27,30,34,38,42],{"id":23,"title":24,"slug":25,"order_index":9,"cornerstone":26,"reading_time_minutes":23},2,"HTML Editors & Environment Setup","html-editors-and-environment-setup",false,{"id":9,"title":28,"slug":29,"order_index":9,"cornerstone":26,"reading_time_minutes":9},"HTML Introduction & History","html-introduction-and-history",{"id":31,"title":32,"slug":33,"order_index":31,"cornerstone":26,"reading_time_minutes":23},3,"HTML Basic Syntax & Document Structure","html-basic-syntax-document-structure",{"id":35,"title":36,"slug":37,"order_index":35,"cornerstone":26,"reading_time_minutes":23},4,"HTML Elements & Tags Explained","html-elements-tags-explained",{"id":39,"title":40,"slug":41,"order_index":39,"cornerstone":26,"reading_time_minutes":23},5,"HTML Attributes (Global & Standard)","html-attributes-global-standard",{"id":43,"title":44,"slug":45,"order_index":43,"cornerstone":26,"reading_time_minutes":23},6,"Understanding the DOCTYPE & HTML5 Boilerplate","understanding-doctype-html5-boilerplate",{"id":23,"name":47,"slug":48,"order_index":23,"topics":49},"Text & Content Basics","text-content-basics",[50,54,58,62,66,70,74,78],{"id":51,"title":52,"slug":53,"order_index":51,"cornerstone":26,"reading_time_minutes":23},7,"HTML Headings (H1–H6) & SEO Best Practices","html-headings-h1-h6-seo-best-practices",{"id":55,"title":56,"slug":57,"order_index":55,"cornerstone":26,"reading_time_minutes":23},8,"HTML Paragraphs & Line Breaks","html-paragraphs-line-breaks",{"id":59,"title":60,"slug":61,"order_index":59,"cornerstone":26,"reading_time_minutes":9},9,"HTML Text Formatting (Bold, Italic, Mark, etc.)","html-text-formatting-bold-italic-mark",{"id":63,"title":64,"slug":65,"order_index":63,"cornerstone":26,"reading_time_minutes":23},10,"HTML Styles (Inline CSS Basics)","html-styles-inline-css-basics",{"id":67,"title":68,"slug":69,"order_index":67,"cornerstone":26,"reading_time_minutes":23},11,"HTML Quotations & Citations (blockquote, q, cite)","html-quotations-citations-blockquote-q-cite",{"id":71,"title":72,"slug":73,"order_index":71,"cornerstone":26,"reading_time_minutes":23},12,"HTML Comments (Best Practices)","html-comments-best-practices",{"id":75,"title":76,"slug":77,"order_index":75,"cornerstone":26,"reading_time_minutes":23},13,"HTML Colors (Names, HEX, RGB, HSL)","html-colors-names-hex-rgb-hsl",{"id":79,"title":80,"slug":81,"order_index":79,"cornerstone":26,"reading_time_minutes":23},14,"HTML & CSS Integration (Inline, Internal, External)","html-css-integration-inline-internal-external",{"id":31,"name":83,"slug":84,"order_index":31,"topics":85},"Links, Media & Navigation","links-media-navigation",[86,90,94,98,102],{"id":87,"title":88,"slug":89,"order_index":87,"cornerstone":26,"reading_time_minutes":23},15,"HTML Links (Anchor Tags & Hyperlinks)","html-links-anchor-tags-hyperlinks",{"id":91,"title":92,"slug":93,"order_index":91,"cornerstone":26,"reading_time_minutes":23},16,"HTML Images (Alt Text, Lazy Loading, Formats)","html-images-alt-text-lazy-loading-formats",{"id":95,"title":96,"slug":97,"order_index":95,"cornerstone":26,"reading_time_minutes":9},17,"HTML Favicon Setup","html-favicon-setup",{"id":99,"title":100,"slug":101,"order_index":99,"cornerstone":26,"reading_time_minutes":23},18,"HTML Page Title & Meta Tags (SEO Essentials)","html-page-title-meta-tags-seo-essentials",{"id":103,"title":104,"slug":105,"order_index":103,"cornerstone":26,"reading_time_minutes":23},19,"HTML File Paths (Absolute vs Relative)","html-file-paths-absolute-vs-relative",{"id":35,"name":107,"slug":108,"order_index":35,"topics":109},"Structuring Content","structuring-content",[110,115,120,125,130,134,138,142,146,150,154,158,162,166,170,174,178],{"id":111,"title":112,"slug":113,"order_index":114,"cornerstone":26,"reading_time_minutes":23},24,"HTML Tables Explained: Rows, Columns & Merging Cells","html-tables-rows-columns-merging-cells",20,{"id":116,"title":117,"slug":118,"order_index":119,"cornerstone":26,"reading_time_minutes":23},25,"HTML Lists: Ordered, Unordered & Description Lists","html-lists-ordered-unordered-description",21,{"id":121,"title":122,"slug":123,"order_index":124,"cornerstone":26,"reading_time_minutes":23},26,"HTML Block vs Inline Elements Explained","html-block-vs-inline-elements",22,{"id":126,"title":127,"slug":128,"order_index":129,"cornerstone":26,"reading_time_minutes":9},27,"HTML Div & Span: Generic Containers Explained","html-div-and-span-containers",23,{"id":131,"title":132,"slug":133,"order_index":111,"cornerstone":26,"reading_time_minutes":23},28,"HTML Classes vs ID: Selectors Explained","html-classes-vs-id-selectors-explained",{"id":135,"title":136,"slug":137,"order_index":116,"cornerstone":26,"reading_time_minutes":9},29,"HTML Iframes: Embedding External Content","html-iframes-embedding-content",{"id":139,"title":140,"slug":141,"order_index":121,"cornerstone":26,"reading_time_minutes":23},30,"HTML Head Element Deep Dive","html-head-element-deep-dive",{"id":143,"title":144,"slug":145,"order_index":126,"cornerstone":26,"reading_time_minutes":23},31,"HTML Layout Techniques: Header, Nav & Footer","html-layout-techniques-header-nav-footer",{"id":147,"title":148,"slug":149,"order_index":131,"cornerstone":26,"reading_time_minutes":23},32,"Responsive HTML Design: Mobile-First Approach","responsive-html-design-mobile-first-approach",{"id":151,"title":152,"slug":153,"order_index":135,"cornerstone":26,"reading_time_minutes":31},74,"HTML Semantic Elements (article, section, aside, nav)","html-semantic-elements-article-section-aside-nav",{"id":155,"title":156,"slug":157,"order_index":139,"cornerstone":26,"reading_time_minutes":23},75,"HTML Style Guide & Coding Conventions","html-style-guide-coding-conventions",{"id":159,"title":160,"slug":161,"order_index":143,"cornerstone":26,"reading_time_minutes":23},76,"HTML Entities & Special Characters","html-entities-special-characters",{"id":163,"title":164,"slug":165,"order_index":147,"cornerstone":26,"reading_time_minutes":9},77,"HTML Symbols","html-symbols",{"id":167,"title":168,"slug":169,"order_index":167,"cornerstone":26,"reading_time_minutes":9},33,"HTML Emojis 😀: How to Use Them in Web Pages","html-emojis-trending-guide",{"id":171,"title":172,"slug":173,"order_index":171,"cornerstone":26,"reading_time_minutes":23},34,"HTML Character Sets: UTF-8 & Encoding Explained","html-character-sets-utf-8-encoding",{"id":175,"title":176,"slug":177,"order_index":175,"cornerstone":26,"reading_time_minutes":9},35,"HTML URL Encoding Explained","html-url-encoding-explained",{"id":179,"title":180,"slug":181,"order_index":179,"cornerstone":26,"reading_time_minutes":9},36,"HTML vs XHTML: Key Differences","html-vs-xhtml-key-differences",{"id":51,"name":183,"slug":184,"order_index":39,"topics":185},"Forms & User Input","forms-user-input",[186,191,196,201,206,211],{"id":187,"title":188,"slug":189,"order_index":190,"cornerstone":26,"reading_time_minutes":23},49,"HTML Forms Introduction","html-forms-introduction",37,{"id":192,"title":193,"slug":194,"order_index":195,"cornerstone":26,"reading_time_minutes":9},50,"HTML Form Attributes (action, method, etc.)","html-form-attributes-action-method",38,{"id":197,"title":198,"slug":199,"order_index":200,"cornerstone":26,"reading_time_minutes":9},51,"HTML Form Elements (input, select, textarea, button)","html-form-elements-input-select-textarea-button",39,{"id":202,"title":203,"slug":204,"order_index":205,"cornerstone":26,"reading_time_minutes":23},52,"HTML Input Types (Modern Types: email, date, color, range)","html-input-types-modern-email-date-color-range",40,{"id":207,"title":208,"slug":209,"order_index":210,"cornerstone":26,"reading_time_minutes":23},53,"HTML Input Attributes (required, placeholder, pattern)","html-input-attributes-required-placeholder-pattern",41,{"id":212,"title":213,"slug":214,"order_index":215,"cornerstone":26,"reading_time_minutes":23},54,"HTML Form Validation (Client-Side)","html-form-validation-client-side",42,{"id":55,"name":217,"slug":218,"order_index":43,"topics":219},"Graphics & Visuals","graphics-visuals",[220,225],{"id":221,"title":222,"slug":223,"order_index":224,"cornerstone":26,"reading_time_minutes":31},55,"HTML Canvas (2D Drawing API) 🔥","html-canvas-2d-drawing-api",43,{"id":226,"title":227,"slug":228,"order_index":229,"cornerstone":26,"reading_time_minutes":31},56,"HTML SVG (Scalable Vector Graphics)","html-svg-scalable-vector-graphics",44,{"id":59,"name":231,"slug":232,"order_index":51,"topics":233},"Multimedia","multimedia",[234,239,244,249,254],{"id":235,"title":236,"slug":237,"order_index":238,"cornerstone":26,"reading_time_minutes":23},57,"HTML Media Overview","html-media-overview",45,{"id":240,"title":241,"slug":242,"order_index":243,"cornerstone":26,"reading_time_minutes":23},58,"HTML Video Embedding (Native Player)","html-video-embedding-native-player",46,{"id":245,"title":246,"slug":247,"order_index":248,"cornerstone":26,"reading_time_minutes":23},59,"HTML Audio Embedding","html-audio-embedding",47,{"id":250,"title":251,"slug":252,"order_index":253,"cornerstone":26,"reading_time_minutes":23},60,"HTML Plug-ins (Object & Embed Tags)","html-plugins-object-embed-tags",48,{"id":255,"title":256,"slug":257,"order_index":187,"cornerstone":26,"reading_time_minutes":23},61,"Embedding YouTube Videos in HTML","embedding-youtube-videos-in-html",{"id":63,"name":259,"slug":260,"order_index":55,"topics":261},"HTML5 Web APIs (Advanced\u002FTrending)","html5-web-apis-advancedtrending",[262,266,270,274,278],{"id":263,"title":264,"slug":265,"order_index":192,"cornerstone":26,"reading_time_minutes":23},62,"HTML Geolocation API","html-geolocation-api",{"id":267,"title":268,"slug":269,"order_index":197,"cornerstone":26,"reading_time_minutes":23},63,"HTML Drag & Drop API","html-drag-and-drop-api",{"id":271,"title":272,"slug":273,"order_index":202,"cornerstone":26,"reading_time_minutes":23},64,"HTML Web Storage (localStorage & sessionStorage)","html-web-storage-localstorage-sessionstorage",{"id":275,"title":276,"slug":277,"order_index":207,"cornerstone":26,"reading_time_minutes":23},65,"HTML Web Workers (Background Processing)","html-web-workers-background-processing",{"id":279,"title":280,"slug":281,"order_index":212,"cornerstone":26,"reading_time_minutes":23},66,"HTML Server-Sent Events (SSE)","html-server-sent-events-sse",{"id":67,"name":283,"slug":284,"order_index":59,"topics":285},"Accessibility & Best Practices (High-Demand  Skill) �","accessibility-best-practices-high-demand-skill",[286,290,294],{"id":287,"title":288,"slug":289,"order_index":221,"cornerstone":26,"reading_time_minutes":23},67,"HTML Accessibility (ARIA, Screen Readers)","html-accessibility-aria-screen-readers",{"id":291,"title":292,"slug":293,"order_index":226,"cornerstone":26,"reading_time_minutes":23},68,"Writing Semantic & SEO-Friendly HTML","writing-semantic-and-seo-friendly-html",{"id":295,"title":296,"slug":297,"order_index":235,"cornerstone":26,"reading_time_minutes":23},69,"HTML Performance Optimization Basics","html-performance-optimization-basics",{"id":71,"name":299,"slug":300,"order_index":63,"topics":301},"Reference & Practice","reference-practice",[302,306,310,314,318,322,326,330],{"id":303,"title":304,"slug":305,"order_index":9,"cornerstone":26,"reading_time_minutes":23},70,"HTML Tag List (Full Reference)","html-tag-list-full-reference",{"id":307,"title":308,"slug":309,"order_index":23,"cornerstone":26,"reading_time_minutes":23},71,"HTML Global Attributes Reference","html-global-attributes-reference",{"id":311,"title":312,"slug":313,"order_index":31,"cornerstone":26,"reading_time_minutes":23},72,"HTML Events Reference","html-events-reference",{"id":315,"title":316,"slug":317,"order_index":35,"cornerstone":26,"reading_time_minutes":23},73,"HTML Browser Support & Compatibility","html-browser-support-compatibility",{"id":319,"title":320,"slug":321,"order_index":39,"cornerstone":26,"reading_time_minutes":23},78,"HTML Doctypes Reference","html-doctypes-reference",{"id":323,"title":324,"slug":325,"order_index":43,"cornerstone":26,"reading_time_minutes":23},79,"HTTP Methods & Messages (Basics for Forms\u002FAPIs)","http-methods-messages-basics",{"id":327,"title":328,"slug":329,"order_index":51,"cornerstone":26,"reading_time_minutes":31},80,"HTML Interview Preparation (Top Q&A)","html-interview-preparation-top-qa",{"id":331,"title":332,"slug":333,"order_index":55,"cornerstone":26,"reading_time_minutes":9},81,"HTML Quiz & Practice Exercises","html-quiz-practice-exercises",{"id":23,"name":335,"slug":336,"icon":5,"icon_url":5,"short_description":337,"meta_title":338,"meta_description":339,"og_image":5,"locale":16,"subcategories":340},"CSS","css","Master CSS from basics to advanced. Learn styling, layouts, Flexbox, Grid, and responsive design with practical examples.","CSS Course - Learn CSS from Scratch to Advanced","Learn CSS (Cascading Style Sheets) step by step. Master selectors, layouts, Flexbox, Grid, animations, and responsive web design with hands-on examples.",[341,370,394,430,462,494,526,558,586,614],{"id":129,"name":342,"slug":343,"order_index":344,"topics":345},"UI Components","ui-components",0,[346,350,354,358,362,366],{"id":347,"title":348,"slug":349,"order_index":255,"cornerstone":26,"reading_time_minutes":43},148,"CSS Buttons: Variants, States, Sizes and Accessible Button Design","css-buttons",{"id":351,"title":352,"slug":353,"order_index":263,"cornerstone":26,"reading_time_minutes":43},149,"CSS Card Component: Layouts with Flexbox, Grid, Container Queries and Subgrid","css-cards",{"id":355,"title":356,"slug":357,"order_index":267,"cornerstone":26,"reading_time_minutes":51},150,"CSS Navbar and Dropdown Menus: Responsive, Sticky and Accessible Navigation","css-navbar-dropdowns",{"id":359,"title":360,"slug":361,"order_index":271,"cornerstone":26,"reading_time_minutes":43},151,"HTML and CSS Forms and Inputs: Styled, Accessible and Validated Form Controls","css-forms-inputs",{"id":363,"title":364,"slug":365,"order_index":275,"cornerstone":26,"reading_time_minutes":43},152,"CSS Tooltips and Popovers: Popover API, Anchor Positioning and Accessible Overlays","css-tooltips-popovers",{"id":367,"title":368,"slug":369,"order_index":279,"cornerstone":26,"reading_time_minutes":43},153,"Pagination and Breadcrumbs: Accessible Navigation Patterns with HTML, CSS and Schema","pagination-breadcrumbs",{"id":75,"name":371,"slug":372,"order_index":344,"topics":373},"CSS Fundamentals & Setup","css-fundamentals-setup",[374,378,382,386,390],{"id":375,"title":376,"slug":377,"order_index":9,"cornerstone":26,"reading_time_minutes":35},82,"CSS Introduction & History: What Is CSS and Why It Matters","css-introduction-and-history",{"id":379,"title":380,"slug":381,"order_index":23,"cornerstone":26,"reading_time_minutes":35},83,"CSS Syntax & How Browsers Apply Styles","css-syntax-how-browsers-apply-styles",{"id":383,"title":384,"slug":385,"order_index":31,"cornerstone":26,"reading_time_minutes":31},84,"Setting Up Your CSS Workspace: Linking Files & Live Server","setting-up-css-workspace-linking-files-live-server",{"id":387,"title":388,"slug":389,"order_index":35,"cornerstone":26,"reading_time_minutes":31},85,"CSS Comments & Code Formatting Best Practices","css-comments-and-code-formatting",{"id":391,"title":392,"slug":393,"order_index":39,"cornerstone":26,"reading_time_minutes":39},86,"Browser DevTools for CSS: Inspect, Debug & Edit Styles Live","browser-devtools-for-css",{"id":79,"name":395,"slug":396,"order_index":344,"topics":397},"Selectors & the Cascade","selectors-the-cascade",[398,402,406,410,414,418,422,426],{"id":399,"title":400,"slug":401,"order_index":43,"cornerstone":26,"reading_time_minutes":35},87,"CSS Basic Selectors: Type, Class, ID, Universal & Grouping","css-basic-selectors",{"id":403,"title":404,"slug":405,"order_index":51,"cornerstone":26,"reading_time_minutes":35},88,"CSS Combinators: Descendant, Child, Adjacent & General Sibling","css-combinators",{"id":407,"title":408,"slug":409,"order_index":55,"cornerstone":26,"reading_time_minutes":35},89,"CSS Attribute Selectors: [attr], ^=, $=, *= and More","css-attribute-selectors",{"id":411,"title":412,"slug":413,"order_index":59,"cornerstone":26,"reading_time_minutes":43},90,"CSS Pseudo-classes: :hover, :focus, :nth-child & Modern Selectors","css-pseudo-classes",{"id":415,"title":416,"slug":417,"order_index":63,"cornerstone":26,"reading_time_minutes":39},91,"CSS Pseudo-elements (::before, ::after)","css-pseudo-elements-before-after",{"id":419,"title":420,"slug":421,"order_index":67,"cornerstone":26,"reading_time_minutes":39},92,"Modern CSS Selectors: :is(), :where(), :has()","modern-css-selectors-is-where-has",{"id":423,"title":424,"slug":425,"order_index":71,"cornerstone":26,"reading_time_minutes":35},93,"CSS Specificity Explained","css-specificity-explained",{"id":427,"title":428,"slug":429,"order_index":75,"cornerstone":26,"reading_time_minutes":39},94,"Cascade, Inheritance & !important","css-cascade-inheritance-important",{"id":87,"name":431,"slug":432,"order_index":344,"topics":433},"Colors, Backgrounds & Effects","colors-backgrounds-effects",[434,438,442,446,450,454,458],{"id":435,"title":436,"slug":437,"order_index":79,"cornerstone":26,"reading_time_minutes":39},95,"CSS Colors (HEX, RGB, HSL, OKLCH)","css-colors-hex-rgb-hsl-oklch",{"id":439,"title":440,"slug":441,"order_index":87,"cornerstone":26,"reading_time_minutes":35},96,"CSS Backgrounds","css-backgrounds",{"id":443,"title":444,"slug":445,"order_index":91,"cornerstone":26,"reading_time_minutes":39},97,"CSS Gradients (Linear, Radial, Conic)","css-gradients-linear-radial-conic",{"id":447,"title":448,"slug":449,"order_index":95,"cornerstone":26,"reading_time_minutes":39},98,"CSS Borders, Outlines & Rounded Corners","css-borders-outlines-rounded-corners",{"id":451,"title":452,"slug":453,"order_index":99,"cornerstone":26,"reading_time_minutes":43},99,"CSS Box Shadow & Text Shadow","css-box-shadow-text-shadow",{"id":455,"title":456,"slug":457,"order_index":103,"cornerstone":26,"reading_time_minutes":39},100,"CSS Opacity & Blend Modes","css-opacity-blend-modes",{"id":459,"title":460,"slug":461,"order_index":114,"cornerstone":26,"reading_time_minutes":43},101,"CSS Filters & backdrop-filter (Glassmorphism)","css-filters-backdrop-filter-glassmorphism",{"id":91,"name":463,"slug":464,"order_index":344,"topics":465},"Box Model & Spacing","box-model-spacing",[466,470,474,478,482,486,490],{"id":467,"title":468,"slug":469,"order_index":119,"cornerstone":26,"reading_time_minutes":51},102,"The CSS Box Model: Content, Padding, Border and Margin","css-box-model",{"id":471,"title":472,"slug":473,"order_index":124,"cornerstone":26,"reading_time_minutes":51},103,"CSS Margin and Margin Collapse","css-margin-and-margin-collapse",{"id":475,"title":476,"slug":477,"order_index":129,"cornerstone":26,"reading_time_minutes":43},104,"CSS Padding: Shorthand, Percentages and Best Practices","css-padding",{"id":479,"title":480,"slug":481,"order_index":111,"cornerstone":26,"reading_time_minutes":59},105,"CSS Width, Height, Min-Width, Max-Width, Min-Height & Max-Height","css-width-height-min-max",{"id":483,"title":484,"slug":485,"order_index":116,"cornerstone":26,"reading_time_minutes":39},106,"CSS box-sizing: content-box vs border-box","css-box-sizing",{"id":487,"title":488,"slug":489,"order_index":121,"cornerstone":26,"reading_time_minutes":51},107,"CSS Overflow: hidden, scroll, auto, clip and Text Truncation","css-overflow",{"id":491,"title":492,"slug":493,"order_index":126,"cornerstone":26,"reading_time_minutes":51},108,"CSS Units: px, rem, em, %, vw, vh and dvh","css-units",{"id":95,"name":495,"slug":496,"order_index":344,"topics":497},"Typography & Text","typography-text",[498,502,506,510,514,518,522],{"id":499,"title":500,"slug":501,"order_index":131,"cornerstone":26,"reading_time_minutes":51},109,"CSS Text Properties: Alignment, Spacing, Decoration and Wrapping","css-text-properties",{"id":503,"title":504,"slug":505,"order_index":135,"cornerstone":26,"reading_time_minutes":51},110,"CSS Fonts and font-family: Font Stacks, Weights and System Fonts","css-fonts-font-family",{"id":507,"title":508,"slug":509,"order_index":139,"cornerstone":26,"reading_time_minutes":51},111,"Web Fonts: Google Fonts, @font-face and Variable Fonts","web-fonts",{"id":511,"title":512,"slug":513,"order_index":143,"cornerstone":26,"reading_time_minutes":51},112,"CSS Text Effects: text-wrap balance, line-clamp, Ellipsis and More","css-text-effects",{"id":515,"title":516,"slug":517,"order_index":147,"cornerstone":26,"reading_time_minutes":55},113,"Styling Links","styling-links-css",{"id":519,"title":520,"slug":521,"order_index":167,"cornerstone":26,"reading_time_minutes":51},114,"Styling Lists & Tables","styling-lists-and-tables-css",{"id":523,"title":524,"slug":525,"order_index":171,"cornerstone":26,"reading_time_minutes":63},115,"Icons (SVG & Icon Fonts)","icons-svg-and-icon-fonts",{"id":99,"name":527,"slug":528,"order_index":344,"topics":529},"Display, Position & Layout Basics","display-position-layout-basics",[530,534,538,542,546,550,554],{"id":531,"title":532,"slug":533,"order_index":175,"cornerstone":26,"reading_time_minutes":51},116,"Display & Inline-block","display-and-inline-block",{"id":535,"title":536,"slug":537,"order_index":179,"cornerstone":26,"reading_time_minutes":43},117,"Position (relative, absolute, fixed, sticky)","position-relative-absolute-fixed-sticky",{"id":539,"title":540,"slug":541,"order_index":190,"cornerstone":26,"reading_time_minutes":43},118,"Z-index & Stacking Contexts","z-index-and-stacking-contexts",{"id":543,"title":544,"slug":545,"order_index":195,"cornerstone":26,"reading_time_minutes":39},119,"Float & Clear (Legacy, and Why to Avoid It)","float-and-clear",{"id":547,"title":548,"slug":549,"order_index":200,"cornerstone":26,"reading_time_minutes":43},120,"Centering Techniques","centering-techniques",{"id":551,"title":552,"slug":553,"order_index":205,"cornerstone":26,"reading_time_minutes":51},121,"aspect-ratio & object-fit","aspect-ratio-and-object-fit",{"id":555,"title":556,"slug":557,"order_index":210,"cornerstone":26,"reading_time_minutes":55},122,"Website Layout Basics","website-layout-basics",{"id":114,"name":559,"slug":560,"order_index":344,"topics":561},"The Modern CSS Toolkit","the-modern-css-toolkit",[562,566,570,574,578,582],{"id":563,"title":564,"slug":565,"order_index":215,"cornerstone":26,"reading_time_minutes":55},129,"CSS Variables (Custom Properties)","css-variables-custom-properties",{"id":567,"title":568,"slug":569,"order_index":224,"cornerstone":26,"reading_time_minutes":55},130,"Math Functions (calc, min, max, clamp)","math-functions-calc-min-max-clamp",{"id":571,"title":572,"slug":573,"order_index":229,"cornerstone":26,"reading_time_minutes":51},131,"Native CSS Nesting","native-css-nesting",{"id":575,"title":576,"slug":577,"order_index":238,"cornerstone":26,"reading_time_minutes":51},132,"Cascade Layers (@layer)","cascade-layers-at-layer",{"id":579,"title":580,"slug":581,"order_index":243,"cornerstone":26,"reading_time_minutes":59},133,"Dark Mode (prefers-color-scheme, light-dark())","dark-mode-prefers-color-scheme-light-dark",{"id":583,"title":584,"slug":585,"order_index":248,"cornerstone":26,"reading_time_minutes":55},134,"CSS Reset & Normalize","css-reset-and-normalize",{"id":119,"name":587,"slug":588,"order_index":344,"topics":589},"Responsive Design","responsive-design",[590,594,598,602,606,610],{"id":591,"title":592,"slug":593,"order_index":253,"cornerstone":26,"reading_time_minutes":59},135,"Mobile-First & the Viewport","mobile-first-and-the-viewport",{"id":595,"title":596,"slug":597,"order_index":187,"cornerstone":26,"reading_time_minutes":55},136,"Media Queries","media-queries",{"id":599,"title":600,"slug":601,"order_index":192,"cornerstone":26,"reading_time_minutes":55},137,"Responsive Images & Video","responsive-images-and-video",{"id":603,"title":604,"slug":605,"order_index":197,"cornerstone":26,"reading_time_minutes":59},138,"Fluid Typography with clamp()","fluid-typography-with-clamp",{"id":607,"title":608,"slug":609,"order_index":202,"cornerstone":26,"reading_time_minutes":59},139,"Container Queries","container-queries",{"id":611,"title":612,"slug":613,"order_index":207,"cornerstone":26,"reading_time_minutes":71},140,"Responsive Navigation Pattern","responsive-navigation-pattern",{"id":124,"name":615,"slug":616,"order_index":344,"topics":617},"Transitions & Animation","transitions-animation",[618,622,626,630,634,638,642],{"id":619,"title":620,"slug":621,"order_index":212,"cornerstone":26,"reading_time_minutes":39},141,"CSS Transitions: Smooth State Changes with transition, @starting-style and allow-discrete","css-transitions",{"id":623,"title":624,"slug":625,"order_index":221,"cornerstone":26,"reading_time_minutes":35},142,"CSS 2D Transforms: translate, rotate, scale, skew and transform-origin","css-2d-transforms",{"id":627,"title":628,"slug":629,"order_index":226,"cornerstone":26,"reading_time_minutes":39},143,"CSS 3D Transforms: perspective, preserve-3d, rotateX\u002FY and backface-visibility","css-3d-transforms",{"id":631,"title":632,"slug":633,"order_index":235,"cornerstone":26,"reading_time_minutes":39},144,"CSS Keyframe Animations: @keyframes, animation shorthand, fill-mode and @property","css-keyframe-animations",{"id":635,"title":636,"slug":637,"order_index":240,"cornerstone":26,"reading_time_minutes":39},145,"CSS Scroll-Driven Animations: animation-timeline, scroll() and view()","css-scroll-driven-animations",{"id":639,"title":640,"slug":641,"order_index":245,"cornerstone":26,"reading_time_minutes":39},146,"CSS View Transitions API: Progressive Enhancement for Page and State Animations","css-view-transitions",{"id":643,"title":644,"slug":645,"order_index":250,"cornerstone":26,"reading_time_minutes":43},147,"Motion Accessibility and Performance: prefers-reduced-motion, will-change and Smooth 60fps Animations","motion-accessibility-prefers-reduced-motion-performance",{"data":647},{"id":543,"title":544,"slug":545,"content":648,"course":649,"subcategory":650,"author":651,"reading_time_minutes":39,"cornerstone":26,"schema_type":657,"faq_json":5,"video_url":5,"canonical_url":658,"meta_title":659,"meta_description":660,"og_image":5,"toc_json":661,"code_examples":718,"quiz":5,"exercises":740,"published_at":5,"updated_at":755,"prev":756,"next":757},"\u003Ch2 id=\"css-float-and-clear-legacy-layout-and-modern-alternatives\">CSS Float and Clear: Legacy Layout and Modern Alternatives\u003C\u002Fh2>\u003Cp>\u003Cstrong>Focus keyword: CSS float and clear.\u003C\u002Fstrong> Before flexbox and grid, float was the main tool for building multi-column layouts. Today it is considered legacy for layout, but it is still useful for one job: wrapping text around an image. In this lesson you will learn how float and clear work, why float layouts cause problems, how to fix them with flow-root and clearfix, and what to use instead.\u003C\u002Fp>\u003Ch3 id=\"trending-keywords-covered-in-this-lesson\">Trending keywords covered in this lesson\u003C\u002Fh3>\u003Cp>CSS float, clear both, clearfix hack, display flow-root, float vs flexbox, float vs grid, shape-outside, text wrap around image, collapsed parent, float legacy layout, modern CSS layout, legacy code maintenance, initial-letter drop cap, float inline-start, logical float.\u003C\u002Fp>\u003Ch2 id=\"1-what-is-float\">1. What Is Float?\u003C\u002Fh2>\u003Cp>The \u003Ccode>float\u003C\u002Fcode> property pushes an element to the left or right edge of its container. The element is taken out of normal block flow, and inline content (text) wraps around it. Values: \u003Ccode>left\u003C\u002Fcode>, \u003Ccode>right\u003C\u002Fcode>, \u003Ccode>none\u003C\u002Fcode> (default), plus the logical values \u003Ccode>inline-start\u003C\u002Fcode> and \u003Ccode>inline-end\u003C\u002Fcode> that adapt to writing direction.\u003C\u002Fp>\u003Cul>\u003Cli>A floated element becomes block-level automatically.\u003C\u002Fli>\u003Cli>Floats need an explicit width (or a replaced element like an image), otherwise they shrink to fit.\u003C\u002Fli>\u003Cli>Floats only move horizontally. There is no vertical float.\u003C\u002Fli>\u003Cli>Margins of floats never collapse.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"2-what-is-clear\">2. What Is Clear?\u003C\u002Fh2>\u003Cp>The \u003Ccode>clear\u003C\u002Fcode> property tells an element to move below earlier floats. Values: \u003Ccode>left\u003C\u002Fcode>, \u003Ccode>right\u003C\u002Fcode>, \u003Ccode>both\u003C\u002Fcode>, \u003Ccode>none\u003C\u002Fcode>, and \u003Ccode>inline-start\u003C\u002Fcode> or \u003Ccode>inline-end\u003C\u002Fcode>. Use \u003Ccode>clear: both\u003C\u002Fcode> on a footer or on an empty element to force it under all floats.\u003C\u002Fp>\u003Ch2 id=\"3-the-collapsed-parent-problem\">3. The Collapsed Parent Problem\u003C\u002Fh2>\u003Cp>Since floated children leave the normal flow, a parent containing only floats has a height of 0. Its border and background collapse and following content wraps awkwardly. This was the famous float bug of the old web.\u003C\u002Fp>\u003Ch3 id=\"fix-1-display-flow-root-modern\">Fix 1: display: flow-root (modern)\u003C\u002Fh3>\u003Cp>Add \u003Ccode>display: flow-root\u003C\u002Fcode> to the parent. It creates a block formatting context that contains floats with no side effects.\u003C\u002Fp>\u003Ch3 id=\"fix-2-clearfix-hack-legacy\">Fix 2: Clearfix hack (legacy)\u003C\u002Fh3>\u003Cp>Add an empty generated element at the end of the parent: \u003Ccode>.clearfix::after { content: ''; display: table; clear: both; }\u003C\u002Fcode>. You will still see this in older projects.\u003C\u002Fp>\u003Ch3 id=\"fix-3-overflow\">Fix 3: overflow\u003C\u002Fh3>\u003Cp>Setting \u003Ccode>overflow: hidden\u003C\u002Fcode> or \u003Ccode>auto\u003C\u002Fcode> on the parent also contains floats, but it can clip shadows and dropdowns.\u003C\u002Fp>\u003Ch2 id=\"4-why-you-should-avoid-float-for-layout\">4. Why You Should Avoid Float for Layout\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Fragile:\u003C\u002Fstrong> layouts break when content is taller, shorter or wider than expected.\u003C\u002Fli>\u003Cli>\u003Cstrong>Needs hacks:\u003C\u002Fstrong> clearfix, fixed widths and negative margins.\u003C\u002Fli>\u003Cli>\u003Cstrong>No real alignment:\u003C\u002Fstrong> vertical centering and equal height columns are hard.\u003C\u002Fli>\u003Cli>\u003Cstrong>Not responsive by nature:\u003C\u002Fstrong> columns need many media queries.\u003C\u002Fli>\u003Cli>\u003Cstrong>Source order problems:\u003C\u002Fstrong> float right reverses visual order, which confuses keyboard and screen reader users.\u003C\u002Fli>\u003Cli>\u003Cstrong>Better tools exist:\u003C\u002Fstrong> flexbox for one-dimensional rows and columns, grid for two-dimensional layouts.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"5-the-legitimate-use-text-wrap-around-images\">5. The Legitimate Use: Text Wrap Around Images\u003C\u002Fh2>\u003Cp>Flexbox and grid cannot make text flow around a shape. Float can. Combine it with \u003Ccode>shape-outside\u003C\u002Fcode> and \u003Ccode>shape-margin\u003C\u002Fcode> to wrap text around a circle or a polygon, which is a popular editorial design trend. Give the floated element a width, a margin on the side facing the text and, for shapes, a matching \u003Ccode>clip-path\u003C\u002Fcode> or \u003Ccode>border-radius\u003C\u002Fcode>.\u003C\u002Fp>\u003Ch2 id=\"6-float-vs-flexbox-vs-grid\">6. Float vs Flexbox vs Grid\u003C\u002Fh2>\u003Cul>\u003Cli>\u003Cstrong>Float:\u003C\u002Fstrong> text wrap, legacy code.\u003C\u002Fli>\u003Cli>\u003Cstrong>Flexbox:\u003C\u002Fstrong> navigation, toolbars, card rows, centering, equal height.\u003C\u002Fli>\u003Cli>\u003Cstrong>Grid:\u003C\u002Fstrong> page layouts, galleries, dashboards, responsive card grids.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"7-migrating-legacy-float-code\">7. Migrating Legacy Float Code\u003C\u002Fh2>\u003Col>\u003Cli>Find the float container and replace clearfix with \u003Ccode>display: flow-root\u003C\u002Fcode> or convert it to flex.\u003C\u002Fli>\u003Cli>Replace percentage widths plus float with \u003Ccode>display: flex\u003C\u002Fcode> and \u003Ccode>flex: 1\u003C\u002Fcode>, or with \u003Ccode>grid-template-columns\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Remove negative margin hacks and use \u003Ccode>gap\u003C\u002Fcode>.\u003C\u002Fli>\u003Cli>Test on small screens and with zoom.\u003C\u002Fli>\u003C\u002Fol>\u003Ch2 id=\"8-common-mistakes\">8. Common Mistakes\u003C\u002Fh2>\u003Cul>\u003Cli>Forgetting to clear floats, so the footer climbs up beside the content.\u003C\u002Fli>\u003Cli>Clearing with an extra empty div in HTML.\u003C\u002Fli>\u003Cli>Using float and flex on the same element (float is ignored on flex items).\u003C\u002Fli>\u003Cli>Floating an element without width.\u003C\u002Fli>\u003Cli>Using float to build a complete layout in new projects.\u003C\u002Fli>\u003C\u002Ful>\u003Ch2 id=\"key-takeaways\">Key Takeaways\u003C\u002Fh2>\u003Cp>Float wraps content around an element, and clear pushes content below floats. Contain floats with display: flow-root, keep float only for text wrapping and shapes, and use flexbox and grid for layouts.\u003C\u002Fp>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 18px\u002F1.6 system-ui, sans-serif; padding: 16px; max-width: 600px; }\n  .pic { float: left; width: 120px; height: 120px; background: linear-gradient(135deg, #e76f51, #e9c46a); margin: 4px 16px 8px 0; border-radius: 8px; }\n<\u002Fstyle>\n<div class='pic'><\u002Fdiv>\n<p>Float lets text wrap around an element. This is the classic use case, like a photo inside an article. The paragraph keeps flowing around the box and goes below it when there is no more room next to the floated element.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .row { border: 3px solid #264653; margin-bottom: 20px; }\n  .col { float: left; width: 50%; box-sizing: border-box; padding: 16px; color: #fff; }\n  .c1 { background: #2a9d8f; }\n  .c2 { background: #e76f51; }\n  .clearfix::after { content: ''; display: table; clear: both; }\n<\u002Fstyle>\n<p>Collapsed parent (border has no height):<\u002Fp>\n<div class='row'><div class='col c1'>Left<\u002Fdiv><div class='col c2'>Right<\u002Fdiv><\u002Fdiv>\n<p style='clear: both'>Fixed with clearfix:<\u002Fp>\n<div class='row clearfix'><div class='col c1'>Left<\u002Fdiv><div class='col c2'>Right<\u002Fdiv><\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .row { border: 3px solid #264653; margin-bottom: 20px; display: flow-root; }\n  .col { float: left; width: 50%; box-sizing: border-box; padding: 16px; color: #fff; }\n  .c1 { background: #2a9d8f; }\n  .c2 { background: #e76f51; }\n  .footer { clear: both; background: #eee; padding: 10px; }\n<\u002Fstyle>\n<div class='row'><div class='col c1'>Left<\u002Fdiv><div class='col c2'>Right<\u002Fdiv><\u002Fdiv>\n<div class='footer'>Footer with clear: both<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 18px\u002F1.6 system-ui, sans-serif; padding: 16px; max-width: 640px; }\n  .circle {\n    float: left; width: 160px; height: 160px; margin-right: 10px;\n    background: radial-gradient(circle at 30% 30%, #ffd166, #ef476f);\n    border-radius: 50%;\n    shape-outside: circle(50%);\n    shape-margin: 12px;\n  }\n<\u002Fstyle>\n<div class='circle'><\u002Fdiv>\n<p>With shape-outside, the text follows the curved edge of the circle instead of the rectangular box. This editorial effect can only be done with float. Try changing the shape to ellipse or polygon and resize the preview to see how the text reflows around the shape in a natural way.<\u002Fp>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-html\">\u003Cpre>\u003Ccode><style>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .layout { display: flex; gap: 16px; }\n  .layout > div { flex: 1; padding: 16px; color: #fff; }\n  .c1 { background: #2a9d8f; }\n  .c2 { background: #e76f51; }\n  .c3 { background: #264653; }\n<\u002Fstyle>\n<p>Modern replacement: flexbox, no clearfix, equal height, real gap.<\u002Fp>\n<div class='layout'>\n  <div class='c1'>Column 1<\u002Fdiv>\n  <div class='c2'>Column 2 has more text to show that all columns keep equal height automatically.<\u002Fdiv>\n  <div class='c3'>Column 3<\u002Fdiv>\n<\u002Fdiv>\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>\u003Cdiv class=\"try-it-yourself language-javascript\">\u003Cpre>\u003Ccode>const methods = [\n  { name: 'clearfix ::after', modern: false },\n  { name: 'overflow: hidden', modern: false },\n  { name: 'display: flow-root', modern: true },\n  { name: 'flexbox container', modern: true },\n  { name: 'grid container', modern: true }\n];\n\nmethods.forEach(function (m) {\n  console.log(m.name + ' -> ' + (m.modern ? 'recommended' : 'legacy'));\n});\u003C\u002Fcode>\u003C\u002Fpre>\u003C\u002Fdiv>",{"name":335,"slug":336},{"name":527,"slug":528},{"slug":652,"display_name":653,"job_title":5,"short_bio":5,"expertise_tags":654,"headshot":5,"long_bio":5,"credentials":5,"twitter_url":5,"linkedin_url":5,"github_url":5,"personal_website_url":5,"other_sameas_urls":5,"topics":655,"posts":656},"badar-khalil","Badar Khalil",[],[],[],"Article","https:\u002F\u002Fwpfsharp.com\u002Ftopics\u002Ffloat-and-clear","CSS Float & Clear: Legacy Layout and Modern Alternatives","Learn CSS float and clear, clearfix, flow-root, shape-outside for text wrap, why float layouts are outdated and how flexbox and grid replace them.",[662,670,674,678,694,698,702,706,710,714],{"id":663,"text":664,"level":23,"children":665},"css-float-and-clear-legacy-layout-and-modern-alternatives","CSS Float and Clear: Legacy Layout and Modern Alternatives",[666],{"id":667,"text":668,"level":31,"children":669},"trending-keywords-covered-in-this-lesson","Trending keywords covered in this lesson",[],{"id":671,"text":672,"level":23,"children":673},"1-what-is-float","1. What Is Float?",[],{"id":675,"text":676,"level":23,"children":677},"2-what-is-clear","2. What Is Clear?",[],{"id":679,"text":680,"level":23,"children":681},"3-the-collapsed-parent-problem","3. The Collapsed Parent Problem",[682,686,690],{"id":683,"text":684,"level":31,"children":685},"fix-1-display-flow-root-modern","Fix 1: display: flow-root (modern)",[],{"id":687,"text":688,"level":31,"children":689},"fix-2-clearfix-hack-legacy","Fix 2: Clearfix hack (legacy)",[],{"id":691,"text":692,"level":31,"children":693},"fix-3-overflow","Fix 3: overflow",[],{"id":695,"text":696,"level":23,"children":697},"4-why-you-should-avoid-float-for-layout","4. Why You Should Avoid Float for Layout",[],{"id":699,"text":700,"level":23,"children":701},"5-the-legitimate-use-text-wrap-around-images","5. The Legitimate Use: Text Wrap Around Images",[],{"id":703,"text":704,"level":23,"children":705},"6-float-vs-flexbox-vs-grid","6. Float vs Flexbox vs Grid",[],{"id":707,"text":708,"level":23,"children":709},"7-migrating-legacy-float-code","7. Migrating Legacy Float Code",[],{"id":711,"text":712,"level":23,"children":713},"8-common-mistakes","8. Common Mistakes",[],{"id":715,"text":716,"level":23,"children":717},"key-takeaways","Key Takeaways",[],[719,724,727,730,733,736],{"id":720,"language":721,"code":722,"is_editable":723},419,"html","\u003Cstyle>\n  body { font: 18px\u002F1.6 system-ui, sans-serif; padding: 16px; max-width: 600px; }\n  .pic { float: left; width: 120px; height: 120px; background: linear-gradient(135deg, #e76f51, #e9c46a); margin: 4px 16px 8px 0; border-radius: 8px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='pic'>\u003C\u002Fdiv>\n\u003Cp>Float lets text wrap around an element. This is the classic use case, like a photo inside an article. The paragraph keeps flowing around the box and goes below it when there is no more room next to the floated element.\u003C\u002Fp>",true,{"id":725,"language":721,"code":726,"is_editable":723},420,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .row { border: 3px solid #264653; margin-bottom: 20px; }\n  .col { float: left; width: 50%; box-sizing: border-box; padding: 16px; color: #fff; }\n  .c1 { background: #2a9d8f; }\n  .c2 { background: #e76f51; }\n  .clearfix::after { content: ''; display: table; clear: both; }\n\u003C\u002Fstyle>\n\u003Cp>Collapsed parent (border has no height):\u003C\u002Fp>\n\u003Cdiv class='row'>\u003Cdiv class='col c1'>Left\u003C\u002Fdiv>\u003Cdiv class='col c2'>Right\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cp style='clear: both'>Fixed with clearfix:\u003C\u002Fp>\n\u003Cdiv class='row clearfix'>\u003Cdiv class='col c1'>Left\u003C\u002Fdiv>\u003Cdiv class='col c2'>Right\u003C\u002Fdiv>\u003C\u002Fdiv>",{"id":728,"language":721,"code":729,"is_editable":723},421,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .row { border: 3px solid #264653; margin-bottom: 20px; display: flow-root; }\n  .col { float: left; width: 50%; box-sizing: border-box; padding: 16px; color: #fff; }\n  .c1 { background: #2a9d8f; }\n  .c2 { background: #e76f51; }\n  .footer { clear: both; background: #eee; padding: 10px; }\n\u003C\u002Fstyle>\n\u003Cdiv class='row'>\u003Cdiv class='col c1'>Left\u003C\u002Fdiv>\u003Cdiv class='col c2'>Right\u003C\u002Fdiv>\u003C\u002Fdiv>\n\u003Cdiv class='footer'>Footer with clear: both\u003C\u002Fdiv>",{"id":731,"language":721,"code":732,"is_editable":723},422,"\u003Cstyle>\n  body { font: 18px\u002F1.6 system-ui, sans-serif; padding: 16px; max-width: 640px; }\n  .circle {\n    float: left; width: 160px; height: 160px; margin-right: 10px;\n    background: radial-gradient(circle at 30% 30%, #ffd166, #ef476f);\n    border-radius: 50%;\n    shape-outside: circle(50%);\n    shape-margin: 12px;\n  }\n\u003C\u002Fstyle>\n\u003Cdiv class='circle'>\u003C\u002Fdiv>\n\u003Cp>With shape-outside, the text follows the curved edge of the circle instead of the rectangular box. This editorial effect can only be done with float. Try changing the shape to ellipse or polygon and resize the preview to see how the text reflows around the shape in a natural way.\u003C\u002Fp>",{"id":734,"language":721,"code":735,"is_editable":723},423,"\u003Cstyle>\n  body { font: 16px system-ui, sans-serif; padding: 16px; }\n  .layout { display: flex; gap: 16px; }\n  .layout > div { flex: 1; padding: 16px; color: #fff; }\n  .c1 { background: #2a9d8f; }\n  .c2 { background: #e76f51; }\n  .c3 { background: #264653; }\n\u003C\u002Fstyle>\n\u003Cp>Modern replacement: flexbox, no clearfix, equal height, real gap.\u003C\u002Fp>\n\u003Cdiv class='layout'>\n  \u003Cdiv class='c1'>Column 1\u003C\u002Fdiv>\n  \u003Cdiv class='c2'>Column 2 has more text to show that all columns keep equal height automatically.\u003C\u002Fdiv>\n  \u003Cdiv class='c3'>Column 3\u003C\u002Fdiv>\n\u003C\u002Fdiv>",{"id":737,"language":738,"code":739,"is_editable":723},424,"javascript","const methods = [\n  { name: 'clearfix ::after', modern: false },\n  { name: 'overflow: hidden', modern: false },\n  { name: 'display: flow-root', modern: true },\n  { name: 'flexbox container', modern: true },\n  { name: 'grid container', modern: true }\n];\n\nmethods.forEach(function (m) {\n  console.log(m.name + ' -> ' + (m.modern ? 'recommended' : 'legacy'));\n});",[741,748],{"id":742,"title":743,"slug":744,"prompt":745,"starter_code":746,"expected_output":747,"language":721,"order_index":9},161,"Wrap Text Around an Avatar","wrap-text-around-avatar","Float the avatar to the left with a 16px right margin so the paragraph wraps around it. Make the avatar a circle and use shape-outside so the text hugs the curve.","\u003Cstyle>\n  .avatar { width: 100px; height: 100px; background: tomato; }\n\u003C\u002Fstyle>\n\u003Cdiv class='avatar'>\u003C\u002Fdiv>\n\u003Cp>Long paragraph text goes here. Add enough words so that the text wraps around the floated avatar and continues below it. Float is still useful for this kind of editorial layout.\u003C\u002Fp>","Avatar floats left, is circular and text wraps along the circle using shape-outside",{"id":749,"title":750,"slug":751,"prompt":752,"starter_code":753,"expected_output":754,"language":721,"order_index":23},162,"Convert a Float Layout to Flexbox","convert-float-to-flexbox","Rewrite this two column float layout using display: flex and gap. Remove the clearfix and the fixed percentage widths.","\u003Cstyle>\n  .row::after { content: ''; display: table; clear: both; }\n  .a { float: left; width: 48%; margin-right: 4%; background: #8ecae6; }\n  .b { float: left; width: 48%; background: #ffb703; }\n\u003C\u002Fstyle>\n\u003Cdiv class='row'>\u003Cdiv class='a'>A\u003C\u002Fdiv>\u003Cdiv class='b'>B\u003C\u002Fdiv>\u003C\u002Fdiv>","Row uses display: flex with gap, columns use flex: 1, no float and no clearfix","2026-09-30T18:00:08+00:00",{"id":539,"slug":541,"title":540},{"id":547,"slug":549,"title":548},{"data":759},[760,763,766,771,776],{"name":335,"slug":336,"description":761,"post_count":23,"subcategories":762},"Learn CSS with practical tutorials and examples covering layouts, Flexbox, Grid, responsive design, typography, positioning, animations, and more.",[],{"name":10,"slug":721,"description":764,"post_count":23,"subcategories":765},"Learn HTML with practical tutorials and examples for beginners. Explore HTML tags, elements, attributes, links, images, forms, semantic HTML, and more with clear explanations and real code examples.",[],{"name":767,"slug":768,"description":769,"post_count":9,"subcategories":770},"WPF","wpf","Learn WPF with practical tutorials and examples covering XAML, windows, controls, layouts, data binding, MVVM, commands, styles, templates, debugging, and modern WPF UI development.",[],{"name":772,"slug":773,"description":774,"post_count":9,"subcategories":775},"Python","python","Learn Python with practical tutorials covering strings, lists, functions, exceptions, files, packages, virtual environments, modules, classes, and beginner programming concepts.",[],{"name":777,"slug":778,"description":779,"post_count":9,"subcategories":780},"Java","java","Learn Java with practical tutorials and examples for beginners. Explore Java syntax, variables, data types, classes, objects, methods, inheritance, exceptions, collections, and more with clear explanations and real code examples.",[]]