{"id":143402,"date":"2024-09-16T10:20:40","date_gmt":"2024-09-16T04:50:40","guid":{"rendered":"https:\/\/data-flair.training\/blogs\/?p=143402"},"modified":"2024-09-16T10:20:40","modified_gmt":"2024-09-16T04:50:40","slug":"what-is-float-property-in-css","status":"publish","type":"post","link":"https:\/\/data-flair.training\/blogs\/what-is-float-property-in-css\/","title":{"rendered":"What is Float Property in CSS"},"content":{"rendered":"<h3>Program 1<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\">&lt;html&gt;\r\n    &lt;head&gt;&lt;title&gt;Float Demo CSS Page&lt;\/title&gt;\r\n    &lt;style&gt;\r\n        #border1\r\n        {\r\n            width: 600px;\r\n            border-width: 5px;\r\n            border-style: double;\r\n            border-color: blue;\r\n            float: left;\r\n        }\r\n        #border2\r\n        {\r\n            width: 600px;\r\n            border-width: 5px;\r\n            border-style: double;\r\n            border-color: brown;\r\n            float: left;\r\n        }\r\n        #border3\r\n        {\r\n            width: 600px;\r\n            border-width: 5px;\r\n            border-style: double;\r\n            border-color: brown;\r\n            float: right;\r\n        }\r\n        #border4\r\n        {\r\n            width: 600px;\r\n            border-width: 5px;\r\n            border-style: double;\r\n            border-color: blueviolet;\r\n            float: left;\r\n        }\r\n      &lt;\/style&gt;  \r\n    &lt;\/head&gt;\r\n    &lt;body&gt;\r\n    &lt;div id=\"border1\"&gt;\r\n        Are you ready to be a Python Pro\r\n        Learn the Essentials of the Python Programming Language. Our Python introduction guide is your secret weapon to success. Not only will you learn the basics of Python syntax, but you\u2019ll also gain a deep understanding of the language and be able to easily create your own programs.\r\n        Python is a General Purpose object-oriented programming language, which means that it can model real-world entities. It is also dynamically-typed because it carries out type-checking at runtime.\r\n      &lt;\/div&gt;         \r\n      &lt;div id=\"border2\"&gt;\r\n        Are you ready to be a Python Pro\r\n        Learn the Essentials of the Python Programming Language. Our Python introduction guide is your secret weapon to success. Not only will you learn the basics of Python syntax, but you\u2019ll also gain a deep understanding of the language and be able to easily create your own programs.\r\n        Python is a General Purpose object-oriented programming language, which means that it can model real-world entities. It is also dynamically-typed because it carries out type-checking at runtime.\r\n      &lt;\/div&gt;   \r\n      &lt;div id=\"border4\"&gt;\r\n        Are you ready to be a Python Pro\r\n        Learn the Essentials of the Python Programming Language. Our Python introduction guide is your secret weapon to success. Not only will you learn the basics of Python syntax, but you\u2019ll also gain a deep understanding of the language and be able to easily create your own programs.\r\n        Python is a General Purpose object-oriented programming language, which means that it can model real-world entities. It is also dynamically-typed because it carries out type-checking at runtime.\r\n      &lt;\/div&gt;   \r\n      \r\n    &lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Program 1 &lt;html&gt; &lt;head&gt;&lt;title&gt;Float Demo CSS Page&lt;\/title&gt; &lt;style&gt; #border1 { width: 600px; border-width: 5px; border-style: double; border-color: blue; float: left; } #border2 { width: 600px; border-width: 5px; border-style: double; border-color: brown; float: left; }&#46;&#46;&#46;<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27226],"tags":[22463,27330,33021,33067,33065,33066,33068,33069],"class_list":["post-143402","post","type-post","status-publish","format-standard","hentry","category-css-tutorials","tag-css","tag-css-float-property","tag-css-program","tag-css-program-on-float-property","tag-css-property","tag-float-property-in-css","tag-how-to-use-float-property-in-css","tag-what-is-float-property-in-css"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>What is Float Property in CSS - DataFlair<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/data-flair.training\/blogs\/what-is-float-property-in-css\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"What is Float Property in CSS - DataFlair\" \/>\n<meta property=\"og:description\" content=\"Program 1 &lt;html&gt; &lt;head&gt;&lt;title&gt;Float Demo CSS Page&lt;\/title&gt; &lt;style&gt; #border1 { width: 600px; border-width: 5px; border-style: double; border-color: blue; float: left; } #border2 { width: 600px; border-width: 5px; border-style: double; border-color: brown; float: left; }&#046;&#046;&#046;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/data-flair.training\/blogs\/what-is-float-property-in-css\/\" \/>\n<meta property=\"og:site_name\" content=\"DataFlair\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DataFlairWS\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-09-16T04:50:40+00:00\" \/>\n<meta name=\"author\" content=\"DataFlair Team\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:site\" content=\"@DataFlairWS\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"DataFlair Team\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"What is Float Property in CSS - DataFlair","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/data-flair.training\/blogs\/what-is-float-property-in-css\/","og_locale":"en_US","og_type":"article","og_title":"What is Float Property in CSS - DataFlair","og_description":"Program 1 &lt;html&gt; &lt;head&gt;&lt;title&gt;Float Demo CSS Page&lt;\/title&gt; &lt;style&gt; #border1 { width: 600px; border-width: 5px; border-style: double; border-color: blue; float: left; } #border2 { width: 600px; border-width: 5px; border-style: double; border-color: brown; float: left; }&#46;&#46;&#46;","og_url":"https:\/\/data-flair.training\/blogs\/what-is-float-property-in-css\/","og_site_name":"DataFlair","article_publisher":"https:\/\/www.facebook.com\/DataFlairWS\/","article_published_time":"2024-09-16T04:50:40+00:00","author":"DataFlair Team","twitter_card":"summary_large_image","twitter_creator":"@DataFlairWS","twitter_site":"@DataFlairWS","twitter_misc":{"Written by":"DataFlair Team","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/data-flair.training\/blogs\/what-is-float-property-in-css\/#article","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/what-is-float-property-in-css\/"},"author":{"name":"DataFlair Team","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445"},"headline":"What is Float Property in CSS","datePublished":"2024-09-16T04:50:40+00:00","mainEntityOfPage":{"@id":"https:\/\/data-flair.training\/blogs\/what-is-float-property-in-css\/"},"wordCount":8,"commentCount":0,"publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"keywords":["css","CSS Float Property","css program","css program on float property","css property","float property in css","how to use float property in css","what is float property in css"],"articleSection":["CSS Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/data-flair.training\/blogs\/what-is-float-property-in-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/data-flair.training\/blogs\/what-is-float-property-in-css\/","url":"https:\/\/data-flair.training\/blogs\/what-is-float-property-in-css\/","name":"What is Float Property in CSS - DataFlair","isPartOf":{"@id":"https:\/\/data-flair.training\/blogs\/#website"},"datePublished":"2024-09-16T04:50:40+00:00","breadcrumb":{"@id":"https:\/\/data-flair.training\/blogs\/what-is-float-property-in-css\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/data-flair.training\/blogs\/what-is-float-property-in-css\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/data-flair.training\/blogs\/what-is-float-property-in-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog Home","item":"https:\/\/data-flair.training\/blogs\/"},{"@type":"ListItem","position":2,"name":"CSS Tutorials","item":"https:\/\/data-flair.training\/blogs\/category\/css-tutorials\/"},{"@type":"ListItem","position":3,"name":"What is Float Property in CSS"}]},{"@type":"WebSite","@id":"https:\/\/data-flair.training\/blogs\/#website","url":"https:\/\/data-flair.training\/blogs\/","name":"DataFlair","description":"Learn Today. Lead Tomorrow.","publisher":{"@id":"https:\/\/data-flair.training\/blogs\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/data-flair.training\/blogs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/data-flair.training\/blogs\/#organization","name":"DataFlair","url":"https:\/\/data-flair.training\/blogs\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/","url":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","contentUrl":"https:\/\/data-flair.training\/blogs\/wp-content\/uploads\/sites\/2\/2016\/07\/Data-Flair.png","width":106,"height":48,"caption":"DataFlair"},"image":{"@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DataFlairWS\/","https:\/\/x.com\/DataFlairWS","https:\/\/www.linkedin.com\/company\/dataflair-web-services-pvt-ltd\/","https:\/\/www.youtube.com\/user\/DataFlairWS"]},{"@type":"Person","@id":"https:\/\/data-flair.training\/blogs\/#\/schema\/person\/c187795dc82ab948373cca526df7c445","name":"DataFlair Team","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/2302ebc438084d2f1f993edc1996a0aae01332e81f3227cba8df0c48ec010ca4?s=96&d=mm&r=g","caption":"DataFlair Team"},"description":"DataFlair Team provides high-impact content on programming, Java, Python, C++, DSA, AI, ML, data Science, Android, Flutter, MERN, Web Development, and technology. We make complex concepts easy to grasp, helping learners of all levels succeed in their tech careers.","url":"https:\/\/data-flair.training\/blogs\/author\/dfteam6\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/143402","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/comments?post=143402"}],"version-history":[{"count":2,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/143402\/revisions"}],"predecessor-version":[{"id":143404,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/posts\/143402\/revisions\/143404"}],"wp:attachment":[{"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/media?parent=143402"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/categories?post=143402"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/data-flair.training\/blogs\/wp-json\/wp\/v2\/tags?post=143402"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}