When I float the div to the right the screen messes up…I've tried clear and some other options

I'm having an issue in general when it comes to floats. I'll be doing fine with the layout but once I start floating the whole page does weird stuff. I think I need a better understanding of the concept of what goes on. Here is my code for html and css.

* {
	margin: 0;
}
#heading {
	background-color: black;
	height: 150px;
}
#navigation {
	background-color: green;
	height: 30px;
}
#leftSide {
	background-color: blue;
	width: 400px;
	height: 700px;
}
#rightSide {
	background-color: red;
	width: 400px;
	height: 700px;
	float: right;
}
#footer {
	background-color: black;
}

<body>
	<div id="wrapper">
	<div id="heading">Heading</div>
	<div id="navigation">Navigation</div>
	<div id="leftSide">Left Side</div>
	<div id="rightSide">Right Side</div>
	<div id="footer">Footer</div>
	<div style="clear: right;"></div>
	</div>
</body>

Use display:inline-block; for your id leftSide

#heading {
	background-color: black;
	height: 150px;
}
#navigation {
	background-color: green;
	height: 30px;
}
#leftSide {
	background-color: blue;
	width: 50%;
	height: 700px;
  display:inline-block;
}
#rightSide {
	background-color: red;
	width: 50%;
	height: 700px;
	float: right;
}
#footer {
	background-color: black;
}

<!DOCTYPE html>
<html>
<head>
	<title>This is it</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<div id="wrapper">
	<div id="heading">Heading</div>
	<div id="navigation">Navigation</div>
	<div id="leftSide">Left Side</div>
	<div id="rightSide">Right Side</div>
	<div id="footer">Footer</div>
	<div style="clear: right;"></div>
	</div>
</body>
</html>

Floating elements create a new block formatting context and so it must be cleared before your footer if you expect it to come below the preceeding contents.

If I guess right, you need to float: left your leftSide div.

I placed your clear: right div above the footer and made it clear: both.

Snippet below:

* {
  margin: 0;
}
#heading {
  background-color: black;
  height: 150px;
}
#navigation {
  background-color: green;
  height: 30px;
}
#leftSide {
  background-color: blue;
  width: 400px;
  height: 700px;
  float: left;
}
#rightSide {
  background-color: red;
  width: 400px;
  height: 700px;
  float: right;
}
#footer {
  background-color: black;
}

<body>
  <div id="wrapper">
    <div id="heading">Heading</div>
    <div id="navigation">Navigation</div>
    <div id="leftSide">Left Side</div>
    <div id="rightSide">Right Side</div>
    <div style="clear: both;"></div>
    <div id="footer">Footer</div>
  </div>
</body>

来源：https://stackoverflow.com/questions/39284594/when-i-float-the-div-to-the-right-the-screen-messes-up-ive-tried-clear-and-so

标签

html

css

html5

css-float

footer