HOME技術ウェブCSS:floatの解除をclear以外で行う

CSS:floatの解除をclear以外で行う

CSSでfloatを使って二段組レイアウトをつくった場合、フッターにfloatの効果を解除するには、clear:bothなどを使っていました。
しかし、clear:bothを使うと、marginなどのCSSの効果が打ち消されてしまいます。
そこで今回は、clear:both以外の方法でfloatの効果を解除する方法を調べました。

overflow:hidden;

clear:bothの代わりに、floatの効果を解除する方法として、overflow:hidden;があります。
この設定を、floatを設定しているタグの上にあたる親要素に設定します。
以下のようなコードになります。

<div style=”overflow:hidden”>
<div style=”float:left;width:200px;”>
<p>左側のコンテンツ</p>
</div>
<div style=”float:right;width:500px;”>
<p>右側のコンテンツ</p>
</div>
</div>
<div>
<p>フッター</p>
</div>

一番最初のdiv要素が親要素になるので、ここにoverflow:hidden;を設定します。
この親要素を閉じた後にある、div要素(フッター部)は、floatが解除された状態で表示されます。

 

関連記事

CSSで二段組のリストをつくる

ulタグを使ったリストをCSSで二段組にして表示する方法です。 HTMLのコード <h2>リスト表示</h2> <ul class=”menu”&…続きを読む

GoogleMapのURLを短縮URLで取得する

GoogleMapにリンクを貼るときに、URLが長くなってしまうのを防ぐ、短縮URLの取得の方法です。 まず、GoogleMapを開きます。 左上の検索窓に住所を入力して、その住所を検索します(ここで…続きを読む

Windows10にアップグレードしたらApacheが起動しなくなった

Windows7からWindows10にアップグレードしたところ、Apacheが起動しなくなりました。 Apacheが起動しなくなる理由には大きく2つあります。 1つ目は、httpd.confの書き間…続きを読む

ウェブフォントを埋め込み任意のフォントを表示させる

ウェブサイトの表示をさせる際に、自分で指定したフォントで相手にも表示させる方法です。 通常、ウェブサイトのフォントは、閲覧する人のコンピュータに同じフォントがなければ、CSSでfont-familyを…続きを読む

ChromeでCSSを更新したときに再読み込みで反映させる

Chromeでウェブサイトをチェックしている場合、CSSを更新した際にブラウザの更新を行って再表示しても、CSSの変更が反映されません。 これはキャッシュがChrome内に残っているために起こっている…続きを読む

CSS3で複数条件のセレクターを指定する

CSS3を使ってテーブルの両端の列の右側はボーダーを表示せず、それ以外のセルの右側にはボーダーを表示したい、という場合には、複数の条件を適用したセレクターを設定する方法です。 「~かつ、~」というセレ…続きを読む