clearを使用した回り込みの解除について

夜分遅くにすみません。
質問させていただきます。
タイトル通り、画像に不自然な段差ができてしまったため、clearを使用して回り込みを解除しようとして色々調べたのですが、解除ができず、手詰まりになってしまいました。
どなたかご教授お願い致します。
](6297d3000af1f9c586244bdf9cb19fc3.png)

CSS

body{
	background-color: #ffffff;
	margin: 0px;
	padding: 0px;
	background-image :url("img/head-bg.jpg")
	background-repeat: repeat-x;
	height:12px;
	background-position: top;
}
.request-icon{
	float: right;
	display: block;
	width: 93px;
}
.reserve-icon{
	float: right;
	display: block;
	width: 93px;
}
div#clear {
	clear: right;
}
.clear hr {
	display: none;
}
a{
	text-decoration: none;
	display:block;
	text-indent:-9999px;
	background-image :url(img/head-menu.jpg);
	height:49px;
	width:100%;
	background-position: 0 top;
}	
#globalnav .idea a{
	background-image :url("img/head-menu.jpg");
	background-repeat: no-repeat;
	background-position: -150px top;
}
#globalnav .service a{
	background-image :url("img/head-menu.jpg");
	background-repeat: no-repeat;
	background-position: -300px top;
}
#globalnav .company a{
	background-image :url("img/head-menu.jpg");
	background-repeat: no-repeat;
	background-position: -450px top;
}
#globalnav .FAQ a{
	background-image :url("img/head-menu.jpg");
	background-repeat: no-repeat;
	background-position: -600px top;
}
#globalnav .access a{
	background-image :url("img/head-menu.jpg");
	background-repeat: no-repeat;
	background-position: -750px top;
}
.box {
	margin: 10px 0;
	float: left;
	width: 100%;
	background: #ffffff ;
}
.box img {
	max-width: 100%;
	float: right;
	margin: 0;
}
.box p {
	margin: 0;	padding: 0px;
}
#sidebar a {
	text-decoration: none;
	float: left;
	display:block;
	text-indent:-9999px;
	width: 255px;
	height: 60px;
	background-image :url(img/top-menu.jpg);
	background-repeat: no-repeat;
	background-position:  0, left bottom;
}
ul#sidebar {
	display: block;
	height: 300px;
}
ul#sidebar li {
	display: block;
	height: 60px;
	list-style-type:none;
}
ul#sidebar .careplan a {
	background-image: url(img/top-menu.jpg);
	background-repeat: no-repeat;
	background-position: left 0px;
	display:block;
	height:60px;
}
ul#sidebar .grouphome a {
	background-image: url(img/top-menu.jpg);
	background-repeat: no-repeat;
	background-position: left -60px;
	display:block;
	height:60px;
}
ul#sidebar .service a {
	background-image: url(img/top-menu.jpg);
	background-repeat: no-repeat;
	background-position: left -120px;
	display:block;
	height:60px;
}
ul#sidebar .homehelp a {
	background-image: url(img/top-menu.jpg) ;
	background-repeat: no-repeat;
	background-position: left -180px;
	display:block;
	height:60px;
}
ul#sidebar .daycare a {
	background-image: url(img/top-menu.jpg) ;
	background-repeat: no-repeat;
	background-position: left -240px;
	display:block;
	height:60px;
}
.left {
	float: left;
}
h1{
	color:#ffffff;
	margin:0px;
}
h2{
	height:80px;
	padding-top:24px;
	padding-left:20px;
	margin:0px;
	color:#000000;
	clear:both;
	}
#content .newsdl dt {
	clear: left;
	float: left;
	padding-left: 30px;
	color: #ffc0c7;
	display: block;
	margin-top:0px;
	margin-right: 0;
	margin-left: 0px;
	background-image: url(img/top-li.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	line-height: 20px;
}
dd{
	margin-left:30px;
	margin-bottom: 15px;
	float: left;
	width: 520px;
}
dt{
	float:left;
	clear:left;
	width:125px;
	color:#ffc0c7;
}
.newsdl .arrow-icon {
		position: relative;
		top: 4px;
		margin-right: 10px;
}
ul#globalnav li{
	float:left;
	width:150px;
	list-style-type:none;
	background-color:#ff9fbf;
	}
ul{
	padding:0px;
	margin:0px;
	}
div#left{
	float:left;
	width:680px;
	background-color:#ffffff;
}
div#right{
	float:right;
	width:220px;
	padding-left:0px;
}
div#right img{
	margin:0px;
}
div#footer {
	text-align:center;
	color:#717171;
	clear:both;
	height: 60px;
	padding: 0;
	background-image: url(img/foot-bg.jpg);
	background-repeat: repeat-x;
	background-position: bottom;
	margin: 0px;
}
div#wrapper{
	width:900px;
	margin: 0 auto;
}

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>東京都板橋区のグループホーム・サービス付き高齢者向け住宅・デイサービスのサンベストビレッジ浮間公園</title>
		<link rel="stylesheet" type="text/css" href="style.css" />
	</head>
	<body>
	<div id="wrapper">
		<h1><img src="img/logo.jpg" alt=""></h1>
	<div class="clear">	
		<img class="request-icon" src="img/head-confirm.jpg" alt="">
		<img class="reserve-icon" src="img/head-reserve.jpg" alt="">
		<hr />
		</div>
	<ul id = "globalnav">
		<li class="home"><a href="html.html">HOME</a></li>
		<li class="idea"><a href="html.html">理念</a></li>
		<li class="service"><a href="html.html">サービス</a></li>
		<li class="company"><a href="html.html">会社概要</a></li>
		<li class="FAQ"><a href="html.html">良くある質問</a></li>
		<li class="access"><a href="html.html">アクセス</a></li>
	</ul>
		<div class="box">
		<img src="img/icatch.png" alt="">
		<div class="left">
		<ul id = "sidebar">
		<li class="careplan"><a href="html.html">ケアプラン</a></li>
		<li class="grouphome"><a href="html.html">グループホーム</a></li>
		<li class="service"><a href="html.html">サービス付き高齢者向け住宅</a></li>
		<li class="homehelp"><a href="html.html">ホームヘルプサービス</a></li>
		<li class="daycare"><a href="html.html">デイサービス</a></li>
		</ul>
	</div>
	</div>
	<div id= "left">
	<h2><img src="img/top-news.jpg" alt=""></h2>
	<dl class="newsdl">
		<dt><img class="arrow-icon" src="img/top-li.jpg" alt="">2016.01.01</dt><dd>今年もサンベストビレッジ浮間公園を<br>
よろしくお願いします。<br></dd>
		<dt><img class="arrow-icon" src="img/top-li.jpg" alt="">2015.11.22</dt><dd>第五回介護甲子園の決勝大会に<br>
出場しました。結果は惜しくも優秀賞でした。<br>
応援の方、ありがとうございました。</dd>
		<dt><img class="arrow-icon" src="img/top-li.jpg" alt="">2015.09.13</dt><dd>第五回介護甲子園決勝進出！！<br>
11月23日に日比谷公会堂にて<br>
決勝大会を行います。<br></dd>
		<dt><img class="arrow-icon" src="img/top-li.jpg" alt="">2015.08.30</dt><dd>サービス付き高齢者向け住宅  残り３室となっております。<br>
（お問い合わせを多数いただいております。）</dd>
		<dt><img class="arrow-icon" src="img/top-li.jpg" alt="">2013.08.20</dt><dd>サービス付き高齢者向け住宅  残り3室</dd>
		<dt><img class="arrow-icon" src="img/top-li.jpg" alt="">2013.06.01</dt><dd>グループホーム  満室となりました。待機者募集中です。</dd>
		<dt><img class="arrow-icon" src="img/top-li.jpg" alt="">2012.09.25</dt><dd>ホームページリニューアルしました。</dd>
		<dt><img class="arrow-icon" src="img/top-li.jpg" alt="">2012.09.25</dt><dd>サービス付き高齢者向け住宅  残り8室</dd>
		<dt><img class="arrow-icon" src="img/top-li.jpg" alt="">2012.09.25</dt><dd>グループホーム  残り2室</dd>
		<dt><img class="arrow-icon" src="img/top-li.jpg" alt="">2012.09.25</dt><dd>求人募集中（来年度新卒含む）</dd>
	</dl>
	</div>

	<div id = "right">
	<img src ="img/top-bn-kamifukuoka.jpg" alt="">
	<img src ="img/top-bn-confirm.jpg" alt="">
	<img src ="img/top-bn-reserve.jpg" alt="">
	<img src ="img/top-bn-staff.jpg" alt="">
	</div>
	
	</div>
	
	<img class="pagetop" src="img/foot-pagetop.jpg" alt="">
	<div id = "footer">		
	<p>会社概要  プライバシーポリシー</p>
	<p><img class="copy-right" src="img/foot-add.png" alt=""></p>
	</div>
	</div>
	</body>
</html>
```ここに言語を入力
コード

行動規範の内容に同意します

回答2件

clearはその要素の上部で回り込みを解除するため、clearを付けるべき要素は#globalnavになります。

でもそれだけだと、左上のサイトタイトル、2つのリンク、グローバルナビでガクガクした感じになりますので更に一手間入れる必要があります。

「floatじゃない要素」の後に「floatな要素」が来るとfloatな要素は前者の下の高さから回り込みを始めます。なので階段状になります。画像の状態もそれになってます。
これを回避するには「両要素をfloatな要素にする」か、「floatな要素を前に持ってくる」かのどちらかの方法が簡単です。

ですので、サイトタイトルをfloat:leftにしてグローバルナビにclear:bothを付けるか、
サイトタイトルの前にリンク2つを持っていけばいいです。

投稿2017/09/07 16:47

oskbt

総合スコア1895

退会済みユーザー

2017/09/12 13:06

回答ありがとうございます。

行動規範の内容に同意します

ベストアンサー

liの親要素#globalnavに、擬似セレクタ:afterを使ってclearfixを設置してみてください。

#globalnav:after {
  content:"";
  display:block;
  clear:both;
}

clearfixとは？
http://kojika17.com/2013/06/clearfix-2013.html

投稿2017/09/08 01:09

編集2017/09/08 01:10

Higemura

総合スコア274

退会済みユーザー

2017/09/12 13:06

回答ありがとうございます。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

clearを使用した回り込みの解除について

関連した質問