1.0CSS Tutorialhttps://techkubo.com/cssrich600338<blockquote class="wp-embedded-content" data-secret="nCO2duqBch"><a href="https://techkubo.com/css/css-floats/">CSS Floats</a></blockquote><iframe sandbox="allow-scripts" security="restricted" src="https://techkubo.com/css/css-floats/embed/#?secret=nCO2duqBch" width="600" height="338" title="“CSS Floats” — CSS Tutorial" data-secret="nCO2duqBch" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" class="wp-embedded-content"></iframe><script> /*! This file is auto-generated */ !function(d,l){"use strict";l.querySelector&&d.addEventListener&&"undefined"!=typeof URL&&(d.wp=d.wp||{},d.wp.receiveEmbedMessage||(d.wp.receiveEmbedMessage=function(e){var t=e.data;if((t||t.secret||t.message||t.value)&&!/[^a-zA-Z0-9]/.test(t.secret)){for(var s,r,n,a=l.querySelectorAll('iframe[data-secret="'+t.secret+'"]'),o=l.querySelectorAll('blockquote[data-secret="'+t.secret+'"]'),c=new RegExp("^https?:$","i"),i=0;i<o.length;i++)o[i].style.display="none";for(i=0;i<a.length;i++)s=a[i],e.source===s.contentWindow&&(s.removeAttribute("style"),"height"===t.message?(1e3<(r=parseInt(t.value,10))?r=1e3:~~r<200&&(r=200),s.height=r):"link"===t.message&&(r=new URL(s.getAttribute("src")),n=new URL(t.value),c.test(n.protocol))&&n.host===r.host&&l.activeElement===s&&(d.top.location.href=t.value))}},d.addEventListener("message",d.wp.receiveEmbedMessage,!1),l.addEventListener("DOMContentLoaded",function(){for(var e,t,s=l.querySelectorAll("iframe.wp-embedded-content"),r=0;r<s.length;r++)(t=(e=s[r]).getAttribute("data-secret"))||(t=Math.random().toString(36).substring(2,12),e.src+="#?secret="+t,e.setAttribute("data-secret",t)),e.contentWindow.postMessage({message:"ready",secret:t},"*")},!1)))}(window,document); </script> The float property allows an element to be taken out of the normal document flow and be positioned to the left or right of its container. Common values for float include left, right, and none (default). In this example, .image-left will float to the left, and .image-right will float to the right. The margin is added to create spacing between the floated element and surrounding content. Clearing Floats When elements are floated, the following content can wrap around them. The clear property is used to prevent this, ensuring that the next element moves below the floated elements. CSS Floats Example Code CSS Labshttps://techkubo.com/css/wp-content/uploads/sites/5/2024/10/CSS-floats-Image1.png1024502