Float & Clear
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link name="favicon" type="image/x-icon" href="https://skillzam.com/uploads/system/e353194f3b7cd1b75d69c3ab88041985.png" rel="shortcut icon" />
<title>Float & Clear</title>
<style>
/* Image element floats to the right of its container*/
.floatImage {
float:right;
}
.outerSec {
padding: 10px;
border: 3px dashed black;
}
/* div element floats to the left */
div {
float: left;
padding: 10%;
}
.orange {
background-color: orange;
}
.white {
background-color: white;
}
.green {
background-color: green;
}
/* element is pushed below both left and right floated elements */
.clearFloat {
clear: both;
}
</style>
</head>
<body>
<!--
float : specifies how an element should float i.e positioning & formatting web content.
float property can have one of the following values:
left - element floats to the left of its container
right - element floats to the right of its container
none - element does not float. This is default
inherit - element inherits the float value of its parent
clear : specifies what elements can float beside the cleared element & on which side.
clear property can have one of the following values:
none - element is not pushed below left or right floated elements. This is default
left - element is pushed below left floated elements
right - element is pushed below right floated elements
both - element is pushed below both left and right floated elements
inherit - element inherits the clear value from its parent
-->
<h1>Demo: Float & Clear </h1>
<section class="outerSec">
<h2>Demo: CSS Float</h2>
<img class="floatImage" src="/notes/examples/assets/img/doggy100.png" alt="Yellow Dog" style="width:10%" title="Image#1">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae aliquid qui perspiciatis illo eum aliquam debitis ipsam! Commodi similique sed, minus autem suscipit molestias labore ex ipsum nesciunt nam iste illum qui, voluptatum fugiat neque eos voluptates tempore maxime sunt fuga cupiditate quos? Sunt a tempore, reprehenderit aut quibusdam ullam inventore quod corrupti commodi alias minus fuga, tenetur, vel magni illo et dignissimos temporibus quos in soluta dolorum. Commodi dolore earum libero! Eos ipsum explicabo velit, ratione repellendus eligendi libero et tenetur recusandae laudantium, tempore voluptatibus beatae accusamus corporis delectus sed debitis corrupti consectetur! Ea, similique incidunt dolorem doloremque sed perspiciatis inventore cupiditate delectus perferendis nesciunt beatae assumenda labore temporibus nisi alias eum! Nisi nam a ad culpa cupiditate deserunt incidunt? Quibusdam suscipit harum tempora veniam distinctio laudantium a! Doloremque mollitia numquam at, repellat minus officia voluptatibus impedit voluptas consectetur excepturi facere maxime magni, enim rerum? Nulla dolorum illo commodi harum non ea modi, voluptate autem corporis, nam obcaecati voluptatem? Nesciunt delectus libero quaerat dolores. Similique cum blanditiis praesentium molestiae dignissimos, nisi sit voluptatum consequuntur earum ad id inventore, aliquid assumenda magnam natus architecto facere qui, rerum eos alias? Numquam eveniet possimus esse accusantium ducimus placeat a, dolorem voluptas commodi maiores nobis sunt iste velit cumque. Magni consequuntur consequatur dolore nisi temporibus cumque blanditiis voluptates ipsam? Dolor, debitis. Perspiciatis optio ratione omnis aspernatur minima, odio sapiente rerum similique illum eum saepe ut excepturi odit aperiam corporis. Quaerat possimus, magnam fugiat odit sequi iure nisi, consequuntur aspernatur exercitationem necessitatibus totam quam vel sed modi labore tenetur accusamus animi adipisci ut est veritatis excepturi! Unde, perferendis accusamus tempore cupiditate tenetur harum, nobis, commodi rerum eos sint sunt at neque modi. Doloribus cum modi sed, explicabo error maxime nostrum numquam in placeat consectetur exercitationem ipsum possimus ab ipsa earum expedita architecto voluptas quis?</p>
</section>
<h2>Demo: CSS Float next to each other</h2>
<div class="orange">ORANGE</div>
<div class="white">WHITE</div>
<div class="green">GREEN</div>
<section class="outerSec clearFloat">
<h2>Demo: CSS Clear</h2>
<img src="/notes/examples/assets/img/doggy100.png" alt="Yellow Dog" style="width:10%" title="Image#2">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repudiandae aliquid qui perspiciatis illo eum aliquam debitis ipsam! Commodi similique sed, minus autem suscipit molestias labore ex ipsum nesciunt nam iste illum qui, voluptatum fugiat neque eos voluptates tempore maxime sunt fuga cupiditate quos? Sunt a tempore, reprehenderit aut quibusdam ullam inventore quod corrupti commodi alias minus fuga, tenetur, vel magni illo et dignissimos temporibus quos in soluta dolorum. Commodi dolore earum libero! Eos ipsum explicabo velit, ratione repellendus eligendi libero et tenetur recusandae laudantium, tempore voluptatibus beatae accusamus corporis delectus sed debitis corrupti consectetur! Ea, similique incidunt dolorem doloremque sed perspiciatis inventore cupiditate delectus perferendis nesciunt beatae assumenda labore temporibus nisi alias eum! Nisi nam a ad culpa cupiditate deserunt incidunt? Quibusdam suscipit harum tempora veniam distinctio laudantium a! Doloremque mollitia numquam at, repellat minus officia voluptatibus impedit voluptas consectetur excepturi facere maxime magni, enim rerum? Nulla dolorum illo commodi harum non ea modi, voluptate autem corporis, nam obcaecati voluptatem? Nesciunt delectus libero quaerat dolores. Similique cum blanditiis praesentium molestiae dignissimos, nisi sit voluptatum consequuntur earum ad id inventore, aliquid assumenda magnam natus architecto facere qui, rerum eos alias? Numquam eveniet possimus esse accusantium ducimus placeat a, dolorem voluptas commodi maiores nobis sunt iste velit cumque. Magni consequuntur consequatur dolore nisi temporibus cumque blanditiis voluptates ipsam? Dolor, debitis. Perspiciatis optio ratione omnis aspernatur minima, odio sapiente rerum similique illum eum saepe ut excepturi odit aperiam corporis. Quaerat possimus, magnam fugiat odit sequi iure nisi, consequuntur aspernatur exercitationem necessitatibus totam quam vel sed modi labore tenetur accusamus animi adipisci ut est veritatis excepturi! Unde, perferendis accusamus tempore cupiditate tenetur harum, nobis, commodi rerum eos sint sunt at neque modi. Doloribus cum modi sed, explicabo error maxime nostrum numquam in placeat consectetur exercitationem ipsum possimus ab ipsa earum expedita architecto voluptas quis?</p>
</section>
</body>
</html>