我想有兩個元素分別左，右一個元素，使用和但事情並沒有以我期望的方式向上移動。請參閱下面的jsfiddle鏈接...使用浮動和清除與<aside>元素
https://jsfiddle.net/vx7tjbkf/
aside {
margin: 0;
padding: 0;
width: 25%;
background-color: aqua;
}
#leftaside {float: left;}
#rightaside {float: right;}
article {float: left;
margin: 0;
padding: 0;
width: 50%;
background-color: lightgreen;
}
樣式表對預留
section,
aside,
article,
footer {
clear: both;
}
一個明確的屬性中刪除它，它會工作，或者使用更具體的選擇覆蓋clear至none; https://jsfiddle.net/vx7tjbkf/1/
CSS clear屬性：https://www.w3schools.com/cssref/pr_class_clear.asp
花車周圍擺弄，而不是「允許左或指定元素的右邊有浮動的元素」，您可以利用顯示：彎曲這裏
嘗試換你leftaside，文章和rightaside用DIV和應用顯示：彎曲吧，這個你可以做到這一點
檢查這個片段
header {
width: 100%;
}
nav {
width: 100%;
}
aside {
margin: 0;
padding: 0;
width: 25%;
background-color: aqua;
}
.content {
display: flex;
justify-content: space-between;
}
article {
float: left;
margin: 0;
padding: 0;
width: 50%;
background-color: lightgreen;
}
footer ul {
width: 30%;
display: inline-block;
padding: 0;
margin: 0;
vertical-align: top;
list-style: none;
}
/* Professor's nav styling...no need to edit
****************************************
*/
nav.sitenav ul {
list-style: none;
}
nav.sitenav li {
display: inline-block;
width: 8em;
text-align: center;
}
nav.sitenav a {
display: block;
font-weight: bold;
}
nav.sitenav a:link,
nav.sitenav a:visited,
nav.sitenav a:hover,
nav.sitenav a:active {
color: green;
text-decoration: none;
border-bottom: thin solid transparent;
}
nav.sitenav a:hover {
border-bottom: thin solid green;
}
nav.sitenav li.youarehere a {
background-color: #cdfecd;
border-bottom: thin solid green;
}
section,
aside,
article,
footer {
clear: both;
}
footer {
border-top: thin solid green;
}<header>
<h1>Vegetables</h1>
</header>
<nav class="sitenav">
<ul>
<li><a href="#">Home</a></li>
<li class="youarehere"><a href="#">Grow</a></li>
<li><a href="#">Buy</a></li>
<li><a href="#">Cook</a></li>
<li><a href="#">Eat</a></li>
</ul>
</nav>
<div class="content">
<aside id="leftaside">
<h3>What's New</h3>
<ul>
<li>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage.</li>
<li>catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</li>
<li>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</li>
<li>Jícama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts.</li>
<li>Sea lettuce water spinach gram fava bean leek dandelion silver beet eggplant bush tomato.</li>
</ul>
</aside>
<article>
<h2>Growing Herbs Indoors</h2>
<section>
<h3>Basil</h3>
<p><img alt="basil" src="images/basil-250.jpg" style="float: right;" />Chaya tepary bean elephant garlic swede sweet pepper tomato horseradish water chestnut drumstick good king henry mung bean. Bell pepper ahipa azuki bean bitter melon garden rocket
chickpea, canna, swede. Tepary bean mung bean yacón, carrot catsear. Carrot ricebean avocado brussels sprout watercress lagos bologi bamboo shoot, garbanzo epazote. Lima Bean kohlrabi burdock - ahipa. Epazote camas bok choy - celtuce corn salad
fiddlehead fat hen. Sorrel cardoon broccoli rabe chicory.</p>
<p>Moth bean beetroot kai-lan. Guar summer purslane courgette elephant garlic chinese mallow turnip greens fluted pumpkin horse gram. Bitter melon celery, sea kale lima bean broadleaf arrowhead, taro. Common bean bitter gourd cassava good king henry
chaya rutabaga good king henry, kurrat canna - yardlong bean kale. Ceylon spinach; fava bean pigeon pea potato squash, canna mung bean!
</p>
</section>
<section>
<h3>Mint</h3>
<p><img alt="mint" src="images/mint-250.jpg" style="float: right;" />Spinach bell pepper gobo lotus root, ginger lima bean arracacha. Kohlrabi - good king henry, ricebean leek brussels sprout, pigeon pea; broadleaf arrowhead; spinach. Moth bean land
cress; hamburg parsley mizuna greens swiss chard earthnut pea leek, west indian gherkin new zealand spinach taro turnip garden rocket! Ulluco jerusalem artichoke spring onion brinjal dandelion sea kale. Lotus root broadleaf arrowhead ulluco orache.
Dolichos bean soko, leek okra mooli radish avocado sweet potato or kumara skirret.
</p>
<p>Beet greens aubergine garden rocket mustard. Green bean celtuce jerusalem artichoke fiddlehead bell pepper tatsoi soybean yacón sweet potato or kumara zucchini. Hamburg parsley mung bean onion polk. Kuka, lima bean kohlrabi moth bean ricebean leek
moth bean scorzonera. Plectranthus, lettuce avocado pak choy.
</p>
</section>
</article>
<aside id="rightaside">
<h3>Resources</h3>
<ul>
<li>Azuki bean, welsh onion garlic cucumber. Orache brinjal fava bean lagos bologi good king henry.</li>
<li>Scorzonera mizuna greens courgette; winged bean shallot bamboo shoot</li>
<li>Green bean ceylon spinach lamb's lettuce. Yarrow garbanzo spinach.</li>
<li>Mizuna greens tepary bean leaves. Common bean; plectranthus bitter melon camas bok choy drumstick lizard's tail new zealand spinach.</li>
<li>Indian pea, tepary bean beetroot golden samphire.</li>
<li>Ti manioc peanut turnip. </li>
<li>Gobo hamburg parsley earthnut pea garbanzo sea beet.</li>
<li>Cucumber lizard's tail chinese mallow. </li>
<li>Turnip dandelion horseradish collard greens ahipa collard greens jícama bitterleaf spring onion.</li>
</ul>
</aside>
</div>
<footer>
<ul>
<li>Manioc manioc garden rocket</li>
<li>Swiss chard fluted pumpkin</li>
<li>Prairie turnip ti lotus root rutabaga</li>
</ul>
<ul>
<li>Winged bean manioc</li>
<li>Lamb's lettuce indian pea</li>
<li>Bamboo shoot</li>
<li>Fava bean azuki bean daikon soybean</li>
</ul>
<ul>
<li>Pumpkin, skirret sorrel sweet pepper</li>
<li>Hamburg parsley</li>
<li>Arracacha, nopal soybean</li>
<li>Lettuce chaya spinach lotus root</li>
</ul>
</footer>