CSS Float


Float property in CSS defines whether image will flow on right or left side.

    Syntax:

  • float:value;

CSS clear property

clear property in CSS used to leave some space around float element.

    Syntax:

  • clear:left;

CSS overflow property

overflow property in CSS is used when surface which encloses HTML element is smaller than element in it.This element provides a scroll bar around element.

    Syntax:

  • overflow:auto;

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div{
float: left;
height:500px;
overflow: auto;
width:200px;
background-color: green;
clear:right;
border-radius: 5px;
}
</style>
<title>
</title>
</head>
<body>
<div>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD <br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
HELLO WORLD<br>
</div>
</body>
</html>

Output:

HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD
HELLO WORLD