А как вы выполняте Clearing?

TonKhaO · January 12, 2010

Всем людям верстающих в дивах конечно всегда после того как зафлоачены элементы выполнять клиринг чтобы отменять обтекание ниже следующих элементов, я лично ставлю после отфлоаченного элемента пустой див у которого в классе прописано cleat: both (конечно возможно это не совсем правильно). Хотелось бы узнать а как вы это делаете

Вот как я это делаю

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>

<style type="text/css">
#left {
	   float: left;
	   display: inline;
	   background: silver;
	   width: 100px;
	   height: 100px;
	   margin: 1px;
}
#right {

		background: maroon;
}
#afterDiv {
		   background: green;
}

.clear {clear: both;}

</style>

</head>

<body>

<div id="left">left</div>
<div id="right">right text</div>

<div class="clear"></div>

<div id="afterDiv">after</div>

</body>
</html>

Edited January 12, 2010 by TonKhaO

psywalker · January 12, 2010

Так как ты поступаешь, я считаю неправильным, а пустые дивы с клеар считаю мусором полнейшим и мне это сразу говорит о качестве и грамотности исполнителя. Я всегда родителю задавал Оверфлоу:хидден как правило. А вообще смотрю по ситуации, но пустые дивы НИ разу в жизни не ставил, чес слово, сразу приучался к правильной вёрстке.

Justnewone · January 12, 2010

добавляю класс clear, в котором display:block и clear:both

TonKhaO · January 12, 2010

Так как ты поступаешь, я считаю неправильным, а пустые дивы с клеар считаю мусором полнейшим и мне это сразу говорит о качестве и грамотности исполнителя. Я всегда родителю задавал Оверфлоу:хидден как правило. А вообще смотрю по ситуации, но пустые дивы НИ разу в жизни не ставил, чес слово, сразу приучался к правильной вёрстке.

я вот тож пытаюсь к ней приучиться

добавляю класс clear, в котором display:block и clear:both

то есть 2 класса в одном элементе через пробел?

Justnewone · January 12, 2010

то есть 2 класса в одном элементе через пробел?

да, о ужас!

psywalker · January 12, 2010

то есть 2 класса в одном элементе через пробел?

Хозяин-барин, дело ваше.

TonKhaO · January 12, 2010

да, о ужас!

почему ужас?

Хозяин-барин, дело ваше.

то есть?

rash · January 12, 2010

Когда как. Иногда и пустой див в конце. Но этим правда не надо злоупотреблять.

shvv · January 12, 2010

Обычно при помощи overflow. Если требуется, чтобы блок не обрезался, что ставлю float родителю.

Great Rash · January 12, 2010

раньше писал clear: both;

теперь обхожусь без этого:

если есть родитель, то overflow: hidden; ему

если нет родителя, то clear: left;/clear: right; следующему блоку в зависимости от ситуации.

aTei · January 12, 2010

Когда первый раз столкнулся, крутил по разному, ничего не выходило, попробовал <div class="clear"></div> - сработало, после этого если нужно всегда так и делаю. Может немного не семантически. Но другого, более красивого способа, не знаю.

С удовольствием гляну на простенький пример с overflow: hidden;

rash · January 12, 2010

Но другого, более красивого способа, не знаю.

Более красивых способов полно. Более надежного, безопасного и универсального действительно не встречал.

Great Rash · January 12, 2010

С удовольствием гляну на простенький пример с overflow: hidden;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}

		body {
			margin: 5px;
		}

		div {
			padding: 5px;
		}

		.parent {
			zoom: 1;
			overflow: hidden;
			border: 1px solid;
		}

		.child {
			float: right;
			width: 300px;
			background: red;
		}

		.next-node {
			border: lightblue 1px solid;
			background: green;
		}

		.clear-r {
			clear: right;
		}
	</style>
</head>

<body>

	<!-- вариант с контейнером -->
	<div class="parent">
		я контейнер в котором плавает блок
		<div class="child">
			я плавающий блок
		</div>
	</div>
	<div class="next-node">
		на меня плавающий блок не наедет
	</div>

	<!-- вариант без контейнера -->
	<div class="child">
		я плавающий блок
	</div>
	<div class="next-node clear-r">
		на меня плавающий блок не наедет
	</div>

</body>
</html>

Yahoo! · January 12, 2010

2psywalker, скажи как прекратить обтекание, если после блока стоит заголовок у которого есть верхний отступ, короче clear: both уберёт у него отступ, а сам блок не имеет родителя. Тут по моему без пустого дива ты никак не обойдёшься. Тут только display: table или ещё есть варианты?

psywalker · January 12, 2010

Ребят, я наверное отстал от жизни, но чес.слово ни разу не использовал клеары всякие и прочие темы. Переверстал сайтов может и не так много, но всегда удавалось решить задачу иным способом.

Хозяин-барин, дело ваше.
то есть?

То есть каждый себе хозяин, и сам выбирает как ему действовать и решать задачу.

2psywalker, скажи как прекратить обтекание, если после блока стоит заголовок у которого есть верхний отступ, короче clear: both уберёт у него отступ, а сам блок не имеет родителя. Тут по моему без пустого дива ты никак не обойдёшься. Тут только display: table или ещё есть варианты?

Ты мне скриншот покажи, того что хочешь получить, я тебе скажу, как я решил бы

Great Rash · January 12, 2010

2psywalker, скажи как прекратить обтекание, если после блока стоит заголовок у которого есть верхний отступ, короче clear: both уберёт у него отступ, а сам блок не имеет родителя. Тут по моему без пустого дива ты никак не обойдёшься. Тут только display: table или ещё есть варианты?

Я бы внутрь заголовка тогда поместил еще один контейнер которому назначил бы паддинг, а маргин у заголовка убрал бы. А если фона у заголовка нет, то просто заменил бы маргин на паддинг.

Yahoo! · January 12, 2010

Я бы внутрь заголовка тогда поместил еще один контейнер которому назначил бы паддинг, а маргин у заголовка убрал бы. А если фона у заголовка нет, то просто заменил бы маргин на паддинг.

Много-вато получается, но, пожалуй, да. А чем так плох пустой див? Я им не пользуюсь, плохой тон и всё такое, но интересно стало.

Great Rash · January 12, 2010

Сменить маргин на паддинг многовато? Или добавить лишний элемент в заголовок? В любом случае и так и так лишний элемент.

Про пустой див - думаю дело вкуса. Лично мне не нравится ибо я модный верстальщик

mishka · January 12, 2010

Я бы внутрь заголовка тогда поместил еще один контейнер которому назначил бы паддинг, а маргин у заголовка убрал бы. А если фона у заголовка нет, то просто заменил бы маргин на паддинг.

Круто ты его...

Плавающие блоки обернуть родительским. Родителю hasLayout+overflow:hidden. Если нельзя чтобы родитель все обрезал(например чтото абсолютом надо вынести за пределы блока) то Родителю hasLayout+after...

div{
	height:1%;
	overflow:hidden;
}
или
div{
	width:100%;
	overflow:hidden;
}
или
div{
	zoom:1;
	overflow:hidden;
}

если по каким-то причинам overflow:hidden; нельзя то тогда вместо него 
div{
	height:1%;
}
div:after{
	content:"";
	display:block;
	clear:both;
}
или
div{
	width:100%;
}
div:after{
	content:"";
	display:block;
	clear:both;
}
или
div{
	zoom:1;
}
div:after{
	content:"";
	display:block;
	clear:both;
}

выбирайте на свое усмотрение.

Edited January 12, 2010 by mishka2

Great Rash · January 12, 2010

div:after{
	content:"";
	display:block;
	clear:both;
}

Вот интересно, такая конструкция работает с DOM?

mishka · January 12, 2010

Вот интересно, такая конструкция работает с DOM?

Ну дык проверь

psywalker · January 12, 2010

я модный верстальщик

Я походу тоже модный

Great Rash · January 12, 2010

Ну дык проверь

Как? Я имею в виду создается реально нода или нет?

mishka · January 12, 2010

Как? Я имею в виду создается реально нода или нет?

Немогу сказать

Единственная проблема - этот способ не решает проблему выпадения маргинов.

Единственная проблема - этот способ не решает проблему выпадения маргинов.

Хотя если сделать так:

#wrapper:after{
	content:".";
	display:block;
	clear:both;
	line-height:0;
	font-size:0;
}

то вроде все ок... ща буду тестить

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<style type="text/css"><!--
		body{
			margin:0;
		}
		#wrapper{
			height:1%;
			background:#00f;
		}
		#wrapper:after{
			content:".";
			display:block;
			clear:both;
			line-height:0;
			font-size:0;
		}
		#sidebar{
			float:left;
			width:200px;
			background:#f00;
			margin:0 0 10px;
		}
		* html #sidebar{
			margin-right:-3px;
		}
		#content{
			overflow:hidden;
			height:1%;
			background:#0ff;
			margin:0 0 10px;
		}
		p{
			margin:10px 0;
		}
	--></style>
</head>
<body>
<div id="wrapper">
	<div id="sidebar">
		<p>sidebar</p>
	</div>
	<div id="content">
		<p>content</p>
	</div>
</div>
</body>
</html>

В хроме и сафари нижний отступ получается не 10px, а 11px как по мне так вполне приемлимо.

:after{

content:"";

display:block;

clear:both;

}

Получается это примерно тоже что создать пустой див с clear:both

Edited January 12, 2010 by mishka2

Justnewone · January 12, 2010

Получается это примерно тоже что создать пустой див с clear:both

Этой штуке даже можно высоту задать

mishka · January 12, 2010

Этой штуке даже можно высоту задать

Хм ну тогда воть

#wrapper:after{
	content:".";
	display:block;
	clear:both;
	line-height:0;
	font-size:0;
	height:0;
}

Везде - 10

Главное преимущество этого способа в том что блок родительский нетолько очищает поток, но он и не "схлопывается", а это значит дополнительный контейнер для бекграунда

Edited January 12, 2010 by mishka2

Sign In

А как вы выполняте Clearing?

Question

Link to comment

Share on other sites

34 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information