Skip to content
  • Quizes
  • QStack
  • Blog
  • pinterest
  • instagram
  • twitter
  • linkedin
  • facebook
W3 Coding Schools
  • Home
  • HTML
    • HTML Introduction
    • HTML Editors
    • Fundamentals of HTML
    • Elements of HTML
    • HTML Attributes
    • HTML Headings
    • HTML Paragraphs
    • HTML Style Attribute
    • HTML Text Formatting
    • HTML Phrase Tags
    • HTML Comments
    • HTML with CSS
    • HTML Links
    • HTML Images
    • HTML Tables
    • HTML Lists
    • HTML Blocks
    • HTML Class Attribute
    • HTML Id Attribute
    • HTML Iframes
    • HTML JavaScript
    • HTML File Paths
    • HTML Head
    • Computer Code Elements
    • HTML Entities
    • HTML Charset
    • HTML URL Encode
    • HTML and XHTML
    • HTML Layouts
    • HTML Forms
    • HTML Form Elements
    • HTML Form Input Types
    • HTML Input Attributes
    • HTML5 Introduction
    • HTML5 New Elements
    • Semantic Elements
    • HTML5 Migration
    • Style Guide
    • HTML Canvas
  • CSS
    • CSS Introduction
    • CSS Syntax and CSS Comments
    • CSS Selectors
    • How to add CSS to a Webpage
    • CSS Color Basics
    • CSS Background Properties
    • CSS Border Properties
    • CSS Margin and Padding Properties
    • CSS Height and Width properties
    • CSS Box Model
    • CSS Outline Properties
    • CSS Fonts
    • CSS Text
    • How To Add Icons
    • CSS Links
    • CSS List-Style
    • CSS Tables
    • CSS Display Property
    • CSS Position Property
    • CSS Overflow Property
    • CSS max-width Property
    • CSS Float and Clear Properties
    • CSS Alignment
    • CSS inline-block
    • CSS Combinators
    • CSS Pseudo Classes
    • CSS Pseudo Elements
    • CSS Opacity
    • CSS Navigation Bar
    • CSS Dropdowns
    • CSS Image Gallery
    • CSS Image Sprites
    • CSS Attribute Selector
    • CSS Styling Forms
    • CSS Counters
    • CSS Units
    • CSS Specificity
    • CSS Website Layout
    • CSS Rounded Corners
    • CSS Border Image Property
    • CSS Multiple Backgrounds
    • CSS Gradient
    • CSS Shadow Effects
    • CSS Text Effects
    • CSS Web Fonts
    • CSS 2D Transforms
  • Bootstrap 4
    • Bootstrap 4 – Introduction
    • Bootstrap versions
    • Bootstrap 4 Layout
    • Bootstrap 3 Vs Bootstrap 4
    • Bootstrap 4 Grid System
    • Bootstrap 4 Typography
    • Bootstrap 4 Colors
    • Bootstrap 4 Images
    • Bootstrap 4 Tables
    • Bootstrap 4 Jumbotron
    • Bootstrap 4 Figures
    • Bootstrap 4 Alerts
    • Bootstrap 4 Buttons
    • Bootstrap 4 Button Group
    • Bootstrap 4 Badges
    • Bootstrap 4 Spinners
    • Bootstrap 4 Progress Bars
    • Bootstrap 4 Pagination
    • Bootstrap 4 Breadcrumbs
    • Bootstrap 4 List Groups
    • Bootstrap 4 Cards
  • jQuery
    • jQuery Introduction
    • jQuery Download
    • jQuery Selectors
    • jQuery Event Methods
    • jQuery Hide/Show Effects
    • jQuery Fading Effects
    • jQuery Sliding Effects
    • jQuery Animation
    • jQuery Stop and Callback
    • jQuery Get and Set Methods
    • jQuery Chaining
    • jQuery Add
    • jQuery Remove
    • jQuery CSS Classes
    • jQuery Style Properties
    • jQuery Dimensions
    • jQuery Traversing
    • jQuery Ancestors
    • jQuery Descendants
    • jQuery Siblings
  • Javascript
    • JS Introduction
    • JS Where to Put
    • JavaScript Syntax
    • JavaScript Comments
    • JavaScript Variables
    • JavaScript Data Types
    • JavaScript Operators
    • JavaScript Events
    • JavaScript Strings
    • JavaScript Numbers
  • php
    • PHP Introduction
    • Install PHP
    • PHP Syntax and Comments
    • PHP Variables
    • PHP Constants
    • PHP Echo and Print
    • PHP Data Types
    • PHP Strings
    • PHP Operators
    • PHP $ and $$ Variables
  • WordPress
    • WordPress Introduction
    • WordPress History
    • WordPress.com vs WordPress.org
    • How to Install WordPress
    • WordPress Dashboard
    • How to Create a WordPress Website
    • WordPress Posts
    • WordPress Pages
    • WordPress Posts vs Pages
    • WordPress Categories
  • SEO
    • SEO Introduction
    • SEO Tactics and Methods
    • SEO Relevant Filenames
    • SEO Domain Name
    • Website Design and SEO
    • SEO Keywords
    • Meta Tags Optimization
    • Title Tag Optimization
    • Anchor Text Optimization
    • Content Optimization
  • Android
    • Android Introduction
    • Android History and Versions
    • Android Architecture
    • Android Environment Setup
    • Android Application Components
    • Hello World Application
    • Android Activities
  • iOS
    • iOS Introduction
    • iOS Environment Setup
    • iOS Architecture

You Are Here

  • Home
  • Learn CSS
  • CSS Float and Clear Properties

Topics

  • CSS Introduction
  • CSS Syntax and CSS Comments
  • CSS Selectors
  • How to add CSS to a Webpage
  • CSS Color Basics
  • CSS Background Properties
  • CSS Border Properties
  • CSS Margin and Padding Properties
  • CSS Height and Width properties
  • CSS Box Model
  • CSS Outline Properties
  • CSS Fonts
  • CSS Text
  • How To Add Icons
  • CSS Links
  • CSS List-Style
  • CSS Tables
  • CSS Display Property
  • CSS Position Property
  • CSS Overflow Property
  • CSS max-width Property
  • CSS Float and Clear Properties
  • CSS Alignment
  • CSS inline-block
  • CSS Combinators
  • CSS Pseudo Classes
  • CSS Pseudo Elements
  • CSS Opacity
  • CSS Navigation Bar
  • CSS Dropdowns
  • CSS Image Gallery
  • CSS Image Sprites
  • CSS Attribute Selector
  • CSS Styling Forms
  • CSS Counters
  • CSS Units
  • CSS Specificity
  • CSS Website Layout
  • CSS Rounded Corners
  • CSS Border Image Property
  • CSS Multiple Backgrounds
  • CSS Gradient
  • CSS Shadow Effects
  • CSS Text Effects
  • CSS Web Fonts
  • CSS 2D Transforms

Oct Champs & Prizes

  • 1. Pooja Ladda
  • 2. Manjali Kuldharan
  • 3. Pranali Surawar
  • 4. Anjali Kulkarni
  • 5. Vishal Deshmukh

Recent Posts

  • HTML Media
  • jQuery Siblings
  • Bootstrap 4 Cards
  • jQuery Descendants
  • jQuery Ancestors

CSS Float and Clear Properties

CSS Float Property

CSS float is a property that pushes any element to float (right, left, none, inherit) inside its parent body, allowing other elements to wrap around it.
This property defines the flow of content. It is generally used with images and layouts.
For eg. : Images in newspapers and articles are placed in a certain position with the rest of the content wrapped around it.
This property has the following values: left, right, inherit, and none.

CSS Float Left

Using float: left property, the element is floated to the left side of its parent element’s content area.

Example:

p {

float: left;

background: #ff5722;

width: 100px;

padding: 30px 0;

text-align: center;

}
Try it

CSS Float Right

Using float: right property, the element is floated to the right side of its parent element’s content area.

Example:

p {

float: right;

background: #ff5722;

width: 100px;

padding: 30px 0;

text-align: center;

}
Try it

CSS Float None

The float: none is a default value, In this, the element is not floated.

Example:

p {

float: none;

background: #ff5722;

width: 100px;

padding: 30px 0;

text-align: center;

}
Try it

CSS Clear Property

The CSS clear property controls the behavior of the floating element by preventing the overlapping of consecutive elements over the floating element.
The clear property values specify the side on which the floating element is not supposed to float.
The values of this property can be none, left, right, both, inherit.

CSS Clear Left

This property specifies that elements are not allowed to Float on the left side in relation to other elements.

Example:

.withoutclear {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid blue;
}
.p1 {
border: 1px solid red;
}
.withclear {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid blue;
}
.p2 {
border: 1px solid red;
clear: left;
}
Try it

CSS Clear Right

This property specifies that elements are not allowed to Float on the right side in relation to other elements.

Example:

.withoutclear {

float: right;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid blue;

}

.p1 {

border: 1px solid red;

}

.withclear {

float: right;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid blue;

}

.p2 {

border: 1px solid red;

clear: right;

}

Try it

Clear None

This property specifies that an element that is allowed to Float on both sides in relation to other elements.

Example:

.withoutclear {

float: left;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid blue;

}

.p1 {

border: 1px solid red;

}

.withclear {

float: right;

width: 100px;

height: 50px;

margin: 10px;

border: 3px solid blue;

}

.p2 {

border: 1px solid red;

clear: none;

}

Try it

CSS box-sizing Property

The box-sizing CSS property defines how the user should calculate the total width and height of an element i.e padding and borders, are to be included or not.
This property has the following values: content-box, border-box, initial, and inherit.

Example:

.content-box {

box-sizing: content-box;

width: 250px;

height: 80px;

padding: 30px;

border: 5px solid #ff5722;

}

.border-box {

box-sizing: border-box;

width: 250px;

height: 80px;

padding: 30px;

border: 5px solid #ff5722;

}
Try it

Post navigation

CSS max-width Property
CSS Alignment

Ask a Question Cancel reply

Your email address will not be published. Required fields are marked *

W3 CODING SCHOOLS © Copyright 2019-20
Privacy policy   Terms of use

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok