浮动元素落在另一个浮动元素下方

Question

我想知道为什么main文章落在sidebar1以下，为什么sidebar2会出现在sidebar1旁边。

main文章浮动到左边，没有宽度。

如何在sidebar1旁边没有足够的空间？

对原因的解释会有很大帮助。

＆＃13;

＆＃13;

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.sidebar1 {
  background-color: cyan;
  float: left;
  width: 20%;
  padding: 0 20px 0 10px;
}
.main {
  background-color: green;
  float: left;
}
.sidebar2 {
  background-color: red;
}

＆＃13;

<div class="contentWrapper">
  <!-- first sidebar goes here -->
  <aside class="sidebar1">
    <h2>Sidebar 1</h2>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus
      elit risus id tortor.</p>
    <h3>Secondary Header</h3>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.</p>
    <h3>Secondary Header</h3>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.</p>
  </aside>
  <!-- main content goes here -->
  <article class="main">
    <h2>Article Title</h2>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus
      elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.</p>
    <p>Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.</p>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus
      elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.</p>
    <h3>Subheading</h3>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus
      elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.</p>
    <h3>Subheading</h3>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus
      elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra
      mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet,
      nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet
      luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tor</p>
  </article>
  <!-- second sidebar goes here -->
  <aside class="sidebar2">
    <h2>Sidebar 2 </h2>
    <ul>
      <li>Aenean orci ante</li>
      <li>Venenatis non adipiscing vita</li>
      <li>Fringilla et neque</li>
      <li>Aenean orci ante</li>
      <li>Venenatis non adipiscing vita</li>
      <li>Fringilla et neque</li>
    </ul>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus
      elit risus id tortor.Suspendisse vitae quam lorem, in tempus velit.</p>
    <p>Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.Suspendisse vitae quam lorem,
      in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.</p>
  </aside>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

你错过了一些事情：

1. 将sidebar1的宽度设置为80％（因为您将content设置为20％），否则浮动框的宽度将由其内容确定，然后

2. 清除<div style="clear:both"></div> 之后的浮动：

   * {
   	-moz-box-sizing: border-box;
   	box-sizing: border-box;	
   }
   
   .sidebar1 {
   	background-color: cyan;
   	float: left;
   	width: 20%;
   	padding: 0 20px 0 10px;
   }
   
   .main {
   	background-color: green;
   	float: left;
       width: 80%;
   }
   
   .sidebar2 {
   	background-color: red;
   }

然后你去！

＆＃13;
＆＃13;
<div class="contentWrapper">
		<!-- first sidebar goes here -->
		<aside class="sidebar1">
			<h2>Sidebar 1</h2>
			<p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.  </p>
		  	<h3>Secondary Header</h3>
		  	<p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.  </p>
		  	<h3>Secondary Header</h3>
		  	<p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. </p>
		</aside>
		<!-- main content goes here -->
		<article class="main">
			<h2>Article Title</h2>
			<p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.</p>
			 <p>Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. </p>
			 <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. </p>
			  <h3>Subheading</h3>
			 <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. </p>
			 <h3>Subheading</h3>
			 <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tor</p>
		</article>
        <div style="clear:both"></div>
		<!-- second sidebar goes here -->
		<aside class="sidebar2">
			<h2>Sidebar 2 </h2>
			<ul>
			    <li>Aenean orci ante</li>
			    <li>Venenatis non adipiscing vita</li>
			    <li> Fringilla et neque</li>
			    <li>Aenean orci ante</li>
			    <li>Venenatis non adipiscing vita</li>
			    <li> Fringilla et neque</li>
		  	</ul>
		  	<p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.Suspendisse vitae quam lorem, in tempus velit. </p>
		  	<p>Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.</p>
		</aside>
	</div>
＆＃13;
<html> <meta charset="UTF-8" />

<script type="text/javascript">

    function validate(){
        var a = document.forms["sendform"]["mobile"].value;
        alert(a);

        return false;
    }

</script>

/*<style>

.myButton {
    background-color:#4a45c7;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    border:1px solid #193eab;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #282b66;
    position: absolute;
    top: 50%;
    left: 45%;
}

.userNameField{
    position: absolute;
    top: 45%;
    left: 45%;
}

.userEmailField{
    position: absolute;
    top: 40%;
    left: 45%;
}

.userMobileField{
    position: absolute;
    top: 35%;
    left: 45%;
}

.userName{
    position: absolute;
    top: 32.5%;
    left: 38%;
}

.userEmail{
    position: absolute;
    top: 37.5%;
    left: 38%;
}

.userMobile{
    position: absolute;
    top: 42.5%;
    left: 38%;
}*/

</style>

    <body>
        <?php

        $stcate = $_POST["stCate"];
        $stcode = $_POST["stCode"];
        $result = $stcate . $stcode;
        ?><br> 
            <form name="sendform" id = "sendform" method="post" action="https://www.ezship.com.tw/emap/ezship_request_order_api.jsp" onsubmit="return validate();">


            <p class = "userName"> 取件人姓名 </p>
            <input type="text" name="rv_name" id = "name" class = "userNameField"/> <br>

            <p class = "userMobile"> 取件人電話</p>
            <input type="text" name="rv_mobile" id = "mobile" class = "userMobileField"/> <br>


            <input type="hidden" name="st_code" value= "<?php echo $result;?>"/>
            <input type="hidden" name="rv_addr" value="" />
            <input type="hidden" name="rv_zip" value="" />
            <input type="hidden" name="rtn_url" value='http://localhost/orderstatus.php' />
            <input type="hidden" name="web_para" value='yes' />

            <input type="submit" class = "myButton" value='確認寄出' />

        </form>


    </body>
</html>
＆＃13;
＆＃13;
＆＃13;

Answer 2

在你的问题中，答案的答案很大。

您写道：

  

main文章浮动到左边，没有宽度。

好吧，你应该总是在浮动元素上设置宽度。

  

浮动的盒子应该有一个为它定义的宽度，   明示或暗示。否则，它将填补它   水平包含块，就像非浮动内容一样，离开   没有其他内容可以绕过它的空间。

     

<子>源：   http://www.brainjar.com/css/positioning/default3.asp

  

您应始终在浮动项目上设置宽度（应用时除外）   直接到图像 - 具有隐式宽度）。如果没有设置宽度，   结果可能无法预测。

     

<子>源：   http://css.maxdesign.com.au/floatutorial/introduction.htm

其他参考资料：

• CSS Float Theory: Things You Should Know ~Smashing Magazine
• 9.5 Floats ~W3C