Tryit Editor v3.6

<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div2 {
  border: 1px solid red;
}

.div3 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}

.div4 {
  border: 1px solid red;
  clear: left;
}
</style>
</head>
<body>

<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that the div2 element is after div1, in the HTML code. However, since div1 is floated to the left, this happens: the text in div2 is floated around div1, and div2 surrounds the whole thing.</div>

<h2>Using clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Using clear moves div4 down below the floated div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>

</body>

</html>

​x
 
<!DOCTYPE html><html><head><style>.div1 {  float: left;  width: 100px;  height: 50px;  margin: 10px;  border: 3px solid #73AD21;}​.div2 {  border: 1px solid red;}​​.div3 {  float: left;  width: 100px;  height: 50px;  margin: 10px;  border: 3px solid #73AD21;}​.div4 {  border: 1px solid red;  clear: left;}</style></head><body>​<h2>Without clear</h2><div class="div1">div1</div><div class="div2">div2 - Notice that the div2 element is after div1, in the HTML code. However, since div1 is floated to the left, this happens: the text in div2 is floated around div1, and div2 surrounds the whole thing.</div>​<h2>Using clear</h2><div class="div3">div3</div><div class="div4">div4 - Using clear moves div4 down below the floated div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>​</body>​<!-- Mirrored from www.w3schools.com/css/tryit.asp?filename=trycss_float_clear by HTTrack Website Copier/3.x [XR&CO'2014], Mon, 27 Jan 2020 02:26:56 GMT --></html>

Save Your Code

Your Code Could Not be Saved

Your Code has Been Saved

Save to Google Drive

Open from Google Drive

Report a Problem: