gpt4 book ai didi

html - 溢出 :hidden, clear:both 和 clear fix 在使用 float 后都不起作用

转载 作者:行者123 更新时间:2023-11-28 07:00:05 27 4
gpt4 key购买 nike

我正在尝试使用 html 和 css 制作一个简单的信息网站,并使用 960 网格,因为该网站将具有分栏结构。

当我将标题 h1 float 到左侧(它有 Logo 图像,我正在使用 css 添加图像作为背景)和右侧的导航列表时,它下面的所有内容都会向上 float 并在使用溢出后:隐藏,它没有清除 float 。我已经尝试了 960 网格的 clear fix 类和 clear:both。但它们也不起作用。

所以请告诉我我做错了什么。

这是CSS

    /**** =header ****/
header {
overflow: hidden;
}

header h1 {
background: url(../img/logo.png) no-repeat;
text-indent: -9999px;
height: 23px;
width: 174px;
float: left;
}

/**** =nav ****/

nav {
float: right;
}

nav li {
display: inline;
}

/**** =banner ****/

.banner {
background: url(../img/city-bg.jpg) no-repeat;
width:695px;
height:231px;
}

.callout {
background: black;
height: 231px;
}

这是html

<html>
<head>
<meta charset="utf-8" />
<titel></title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/text.css">
<link rel="stylesheet" href="css/960_12_col.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body >
<div class="container_12"> <!--start container - using the 960 grid-->
<header>
<h1>White + Black</h1>
<nav>
<ul>
<li><a href="home.html">home</a></li>
<li><a href="ourservices.html">Our Serices</a></li>
<li><a href="howwework.html">How We Work</a></li>
<li><a href="testimonials.html">Testimonials</a></li>
<li><a href="workexamples.html">Work Examples</a></li>
</ul>
</nav>

<div class="banner gird_10">
<p>
some text some text some text some text some text
</p>
</div>
<div class="grid_2 callout"></div>
</header>

<div class="main">
<div class="grid_5">
<h3>serices we offer</h3>
<p>
some text some text some text some text some text some text some text some text some text
</p>
<p>
some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
</p>
<p><a href="#" class="button">Read More</a></p>
</div>

<div class="grid_5">
<h3>how we work</h3>
<p>
some text some text some text some text some text some text some text some text some text
</p>
<p>
some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text some text
</p>
<p><a href="#" class="button">Read More</a></p>
</div>
</div>
<div class="grid_2">
<blockquote>
<p>
some text some text some text some textsome text some text some text some text
</p>
</blockquote>
</div>

<footer>
<p><strong>black + white</strong> themes via <a href="www.themeforest.net">themeforest</a></p>
</footer>
</div> <!--end container-->
</body>

最佳答案

我通常做的是创建一个.clear类:

.clear {
clear:both;
}

并将其放在 float 元素之后。在这种情况下,在 nav 之后我想是这样的:

<h1>Title</h1>
<nav>
<!-- nav elements -->
</nav>
<div class="clear"></div>

但如果您有 .clearfix 类,请使用它。

关于html - 溢出 :hidden, clear:both 和 clear fix 在使用 float 后都不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33285751/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com