float и overflow

vikusik · June 4, 2011

Всем привет!

Есть код:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title></title>
<style>
.block {
	background-color: #CCC;
}
.float {
	float: left;
	width: 50px;
	height: 50px;
	background-color: #0F0;
}
</style>
</head> 
<body> 
	<div class="block">
		<div class="float"></div>
		<p>текст текст текст текст текст текст текст текст текст текст текст текст</p>
	</div>
</body> 
</html>

Ситуация такая: чтобы div.block захватил и div.float, нужно назначить ему overflow: hidden. Но что делать, если внутри будут например абсолютно позиционированные элементы, выходящие за его пределы, тогда они обрежутся. Как можно в этом случае заменить overflow? Если подумать, то приходит только min-heigh, но мне нужно, чтобы div.block закначивался там, где заканчиватся div.float, так как высота div.float неизвестна, разная. Подскажите, а

Softlink · June 4, 2011

таблицей сделать

psywalker · June 4, 2011

Всем привет!
Есть код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> 
<title></title>
<style>
.block {
	background-color: #CCC;
}
.float {
	float: left;
	width: 50px;
	height: 50px;
	background-color: #0F0;
}
</style>
</head> 
<body> 
	<div class="block">
		<div class="float"></div>
		<p>текст текст текст текст текст текст текст текст текст текст текст текст</p>
	</div>
</body> 
</html>
Ситуация такая: чтобы div.block захватил и div.float, нужно назначить ему overflow: hidden. Но что делать, если внутри будут например абсолютно позиционированные элементы, выходящие за его пределы, тогда они обрежутся. Как можно в этом случае заменить overflow? Если подумать, то приходит только min-heigh, но мне нужно, чтобы div.block закначивался там, где заканчиватся div.float, так как высота div.float неизвестна, разная. Подскажите, а

display: table, display: inline-block, block:after {/clearfix/}

Softlink · June 4, 2011

display: table, display: inline-block, block:after {/clearfix/}

ну это если не надо под ие 6-7 затачивать

psywalker · June 4, 2011

display: table, display: inline-block, block:after {/clearfix/}
ну это если не надо под ие 6-7 затачивать

Да лана, это почему же?

Softlink · June 4, 2011

а разве display:table официально начал работать под ие 6 и 7?

psywalker · June 4, 2011

а разве display:table официально начал работать под ие 6 и 7?

Ну он то нет, там таблица, о остальные два?

Softlink · June 4, 2011

а разве display:table официально начал работать под ие 6 и 7?
Ну он то нет, там таблица, о остальные два?

ну вот, о чем я сразу и написал - не греть голову и собрать все в таблице

psywalker · June 4, 2011

а разве display:table официально начал работать под ие 6 и 7?
Ну он то нет, там таблица, о остальные два?
ну вот, о чем я сразу и написал - не греть голову и собрать все в таблице

Нахрена? Не понимаю тебя. Можно сделать обычный clearfix, это пару лишних правил, и всё, зачем таблица?

Softlink · June 4, 2011

а разве display:table официально начал работать под ие 6 и 7?
Ну он то нет, там таблица, о остальные два?
ну вот, о чем я сразу и написал - не греть голову и собрать все в таблице
Нахрена? Не понимаю тебя. Можно сделать обычный clearfix, это пару лишних правил, и всё, зачем таблица?

погоди, я тебя правильно понял?

Все затолкать в див с display:table, там выстроить не абсолютные блоки инлайном?

psywalker · June 4, 2011

а разве display:table официально начал работать под ие 6 и 7?
Ну он то нет, там таблица, о остальные два?
ну вот, о чем я сразу и написал - не греть голову и собрать все в таблице
Нахрена? Не понимаю тебя. Можно сделать обычный clearfix, это пару лишних правил, и всё, зачем таблица?
погоди, я тебя правильно понял?
Все затолкать в див с display:table, там выстроить не абсолютные блоки инлайном?

Да нет же, это я просто перечислил варианты решений display:table отпадает, ИЕ не понимает их, а вот остальные два вполне себе можно эмулировать и сделать.

Softlink · June 4, 2011

а разве display:table официально начал работать под ие 6 и 7?
Ну он то нет, там таблица, о остальные два?
ну вот, о чем я сразу и написал - не греть голову и собрать все в таблице
Нахрена? Не понимаю тебя. Можно сделать обычный clearfix, это пару лишних правил, и всё, зачем таблица?
погоди, я тебя правильно понял?
Все затолкать в див с display:table, там выстроить не абсолютные блоки инлайном?
Да нет же, это я просто перечислил варианты решений display:table отпадает, ИЕ не понимает их, а вот остальные два вполне себе можно эмулировать и сделать.

я про clearfix ничего не знаю

buddah · June 4, 2011

http://www.webtoolkit.info/css-clearfix.html

Softlink · June 4, 2011

http://www.webtoolkit.info/css-clearfix.html

уже прочитал)

psywalker · June 4, 2011

я про clearfix ничего не знаю

Ааа, да нет проблем дружище, смотри, вот тебе пример накидал:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	* {}
	.wrap { background: red;}
		.wrap .float { float: left; width: 300px; height: 300px;}
		.wrap:after { 
			clear: both; 
			display: block; 
			overflow: hidden; 
			height: 0; 
			content: '.'; 
			visibility: hidden;
		}
		* html .wrap{ height: 1%; }
		*+html .wrap { min-height: 1%;}
</style>
</head>

<body>
	<div class="wrap">
		<div class="float">Float</div>
	</div>
</body>
</html>

Вот и всё, и никаких тебе overflow: hidden;

Softlink · June 4, 2011

я про clearfix ничего не знаю

Ааа, да нет проблем дружище, смотри, вот тебе пример накидал:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	* {}
	.wrap { background: red;}
		.wrap .float { float: left; width: 300px; height: 300px;}
		.wrap:after { 
			clear: both; 
			display: block; 
			overflow: hidden; 
			height: 0; 
			content: '.'; 
			visibility: hidden;
		}
		* html .wrap{ height: 1%; }
		*+html .wrap { min-height: 1%;}
</style>
</head>

<body>
	<div class="wrap">
		<div class="float">Float</div>
	</div>
</body>
</html>

Вот и всё, и никаких тебе overflow: hidden;

воо спасибо :devil: Иногда может быть полезен такой прием. Я так понял, тут просто конструкцию надо соорудить, используя :after

psywalker · June 4, 2011

я про clearfix ничего не знаю
Ааа, да нет проблем дружище, смотри, вот тебе пример накидал:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	* {}
	.wrap { background: red;}
		.wrap .float { float: left; width: 300px; height: 300px;}
		.wrap:after { 
			clear: both; 
			display: block; 
			overflow: hidden; 
			height: 0; 
			content: '.'; 
			visibility: hidden;
		}
		* html .wrap{ height: 1%; }
		*+html .wrap { min-height: 1%;}
</style>
</head>

<body>
	<div class="wrap">
		<div class="float">Float</div>
	</div>
</body>
</html>
Вот и всё, и никаких тебе overflow: hidden;
воо спасибо Иногда может быть полезен такой прием. Я так понял, тут просто конструкцию надо соорудить, используя :after

Да тут сооружать-то нечего, пара строк кода)

sigma77 · June 4, 2011

display: table, display: inline-block, block:after {/clearfix/}

Плюс еще родителю тоже можно флоат задать. А там опять очистить поток одним из способов

psywalker · June 4, 2011

display: table, display: inline-block, block:after {/clearfix/}
Плюс еще родителю тоже можно флоат задать. А там опять очистить поток одним из способов

Точно!

mishka · June 4, 2011

http://forum.htmlbook.ru/index.php?showtopic=18993&view=findpost&p=134466

для ие 6-7, всетаки лучше zoom: 1; хоть и не валидно но зато отработает правильно без багла.


.clearfix { zoom: 1 }
.clearfix:after {
    content: "\00a0";
    display: block;
    clear: both;
    font-size: 0;
    line-height: 0;
}

И теперь тем блокам где нужно сделать очистку потока, просто добавить класс clearfix

psywalker · June 4, 2011

http://forum.htmlbook.ru/index.php?showtopic=18993&view=findpost&p=134466
для ие 6-7, всетаки лучше zoom: 1; хоть и не валидно но зато отработает правильно без багла.

Отцы советуют height: 1%, и т.д. Чем лучше zoom: 1;?

mishka · June 4, 2011

http://forum.htmlbook.ru/index.php?showtopic=18993&view=findpost&p=134466
для ие 6-7, всетаки лучше zoom: 1; хоть и не валидно но зато отработает правильно без багла.
Отцы советуют height: 1%, и т.д. Чем лучше zoom: 1;?

zoom: 1 - поставил и забыл;

height: 1% - поставил и думай чтобы родителю высоту никто не добавил.

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

psywalker · June 4, 2011

http://forum.htmlbook.ru/index.php?showtopic=18993&view=findpost&p=134466
для ие 6-7, всетаки лучше zoom: 1; хоть и не валидно но зато отработает правильно без багла.
Отцы советуют height: 1%, и т.д. Чем лучше zoom: 1;?
zoom: 1 - поставил и забыл;
height: 1% - поставил и думай чтобы родителю высоту никто не добавил.
Представь аккордион, у которого элементы слайдятся по высоте, тоесть джс родителю во время слайда пропишет высоту, и во время слайда этот блок будет выглядеть некрасиво.

Очень узкий круг задач + 1% - это очень мало, но, да, ты прав наверное, zoom: 1 в принципе такой-же haslayot врубает, но вреда меньше, так?

mishka · June 4, 2011

вот пару примеров. И поверь такое встречается часто, и приходится менять этот height: 1% на zoom: 1;

<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>open/close</title>
	<style type="text/css">
		.box { border: 1px solid #f00; }
		.slide {
			height: 1%;
			overflow: hidden;
		}
		.left {
			width: 49%;
			float: left;
		}
		.right {
			width: 49%;
			float: right;
		}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script type="text/javascript">
		jQuery ( function () {
			jQuery ( '.box' ).each ( function () {
				var btnOpenClose = jQuery ( '.opener', this ),
					slideBox = jQuery ( '.slide', this );

				btnOpenClose.click ( function () {
					slideBox.slideToggle()
				})
			})
		})
	</script>
</head>
<body>
	<div class="box">
		<input class="opener" type="button" value="open/close" />
		<div class="slide">
			<div class="left">
				<h2>leftbox</h2>
				<p>Lorem ipsum dolor sit amet consectetuer hendrerit nisl cursus a Cum. Adipiscing ut Cras commodo condimentum pellentesque auctor pede Curabitur Curabitur tincidunt. Lorem sem dolor tempus leo id ac urna justo massa ultrices. Quam Pellentesque ac faucibus Quisque nibh tellus nascetur ipsum tristique orci. Id Cum Sed faucibus elit laoreet Fusce condimentum rhoncus Phasellus ligula. Tincidunt metus hendrerit a Vestibulum leo sapien tortor Proin Sed quis. Consequat justo libero augue consequat tincidunt Maecenas gravida nibh In pede. Curabitur quis elit cursus tortor Mauris est justo fringilla Nulla aliquet. Aliquam Vestibulum Phasellus tellus pede semper tempus Nam egestas semper eget. Ligula mattis velit Phasellus rutrum libero tellus consequat pharetra nonummy justo. Sed ante hendrerit nibh pretium vitae venenatis non tellus id magnis. Mauris et a Nullam neque lacinia sollicitudin ut lacus semper eros. Habitasse pulvinar wisi neque.</p>
			</div>
			<div class="right">
				<h2>rightbox</h2>
				<p>Lorem ipsum dolor sit amet consectetuer hendrerit nisl cursus a Cum. Adipiscing ut Cras commodo condimentum pellentesque auctor pede Curabitur Curabitur tincidunt. Lorem sem dolor tempus leo id ac urna justo massa ultrices. Quam Pellentesque ac faucibus Quisque nibh tellus nascetur ipsum tristique orci. Id Cum Sed faucibus elit laoreet Fusce condimentum rhoncus Phasellus ligula. Tincidunt metus hendrerit a Vestibulum leo sapien tortor Proin Sed quis. Consequat justo libero augue consequat tincidunt Maecenas gravida nibh In pede. Curabitur quis elit cursus tortor Mauris est justo fringilla Nulla aliquet. Aliquam Vestibulum Phasellus tellus pede semper tempus Nam egestas semper eget. Ligula mattis velit Phasellus rutrum libero tellus consequat pharetra nonummy justo. Sed ante hendrerit nibh pretium vitae venenatis non tellus id magnis. Mauris et a Nullam neque lacinia sollicitudin ut lacus semper eros. Habitasse pulvinar wisi neque.</p>
			</div>
		</div>
	</div>
</body>
</html>

<!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">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>open/close</title>
	<style type="text/css">
		.box { border: 1px solid #f00; }
		.left {
			width: 49%;
			float: left;
		}
		.right {
			width: 49%;
			float: right;
		}
		.holder {
			height: 1%;
			overflow: hidden;
			border: 1px solid #f0f;
		}
	</style>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
	<script type="text/javascript">
		jQuery ( function () {
			jQuery ( '.box' ).each ( function () {
				var btnOpenClose = jQuery ( '.opener', this ),
					slideBox = jQuery ( '.slide', this );

				btnOpenClose.click ( function () {
					slideBox.slideToggle()
				})
			})
		})
	</script>
</head>
<body>
	<div class="box">
		<input class="opener" type="button" value="open/close" />
		<div class="slide">
			<div class="holder">
				<div class="left">
					<h2>leftbox</h2>
					<p>Lorem ipsum dolor sit amet consectetuer hendrerit nisl cursus a Cum. Adipiscing ut Cras commodo condimentum pellentesque auctor pede Curabitur Curabitur tincidunt. Lorem sem dolor tempus leo id ac urna justo massa ultrices. Quam Pellentesque ac faucibus Quisque nibh tellus nascetur ipsum tristique orci. Id Cum Sed faucibus elit laoreet Fusce condimentum rhoncus Phasellus ligula. Tincidunt metus hendrerit a Vestibulum leo sapien tortor Proin Sed quis. Consequat justo libero augue consequat tincidunt Maecenas gravida nibh In pede. Curabitur quis elit cursus tortor Mauris est justo fringilla Nulla aliquet. Aliquam Vestibulum Phasellus tellus pede semper tempus Nam egestas semper eget. Ligula mattis velit Phasellus rutrum libero tellus consequat pharetra nonummy justo. Sed ante hendrerit nibh pretium vitae venenatis non tellus id magnis. Mauris et a Nullam neque lacinia sollicitudin ut lacus semper eros. Habitasse pulvinar wisi neque.</p>
				</div>
				<div class="right">
					<h2>rightbox</h2>
					<p>Lorem ipsum dolor sit amet consectetuer hendrerit nisl cursus a Cum. Adipiscing ut Cras commodo condimentum pellentesque auctor pede Curabitur Curabitur tincidunt. Lorem sem dolor tempus leo id ac urna justo massa ultrices. Quam Pellentesque ac faucibus Quisque nibh tellus nascetur ipsum tristique orci. Id Cum Sed faucibus elit laoreet Fusce condimentum rhoncus Phasellus ligula. Tincidunt metus hendrerit a Vestibulum leo sapien tortor Proin Sed quis. Consequat justo libero augue consequat tincidunt Maecenas gravida nibh In pede. Curabitur quis elit cursus tortor Mauris est justo fringilla Nulla aliquet. Aliquam Vestibulum Phasellus tellus pede semper tempus Nam egestas semper eget. Ligula mattis velit Phasellus rutrum libero tellus consequat pharetra nonummy justo. Sed ante hendrerit nibh pretium vitae venenatis non tellus id magnis. Mauris et a Nullam neque lacinia sollicitudin ut lacus semper eros. Habitasse pulvinar wisi neque.</p>
				</div>
			</div>
		</div>
	</div>
</body>
</html>

psywalker · June 4, 2011

Да, но все эти случаи касаются именно всяких выпадушек, аккордеонов и т.д. Но например блок с основным контентом врядли будет закрываться.

Peekit · June 16, 2012

я про clearfix ничего не знаю

Ааа, да нет проблем дружище, смотри, вот тебе пример накидал:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
	* {}
	.wrap { background: red;}
		.wrap .float { float: left; width: 300px; height: 300px;}
		.wrap:after { 
			clear: both; 
			display: block; 
			overflow: hidden; 
			height: 0; 
			content: '.'; 
			visibility: hidden;
		}
		* html .wrap{ height: 1%; }
		*+html .wrap { min-height: 1%;}
</style>
</head>

<body>
	<div class="wrap">
		<div class="float">Float</div>
	</div>
</body>
</html>

Вот и всё, и никаких тебе overflow: hidden;

буду признателен, если поясните немного этот пример (:

clear и overflow так и нужны вместе, или чего-то одного будет достаточно?

почему это будет работать, если мы добавляем этот афтер к wrap? разве это надо поместить не внутрь в самый низ?

и для чего нужны две последние строчки в стилях - зачем и высоту и ещё минимальную высоту ставить?

и ещё, вроде можно ведь сделать контент пустым, если написать '', или нет?

спасибо)

Sign In

float и overflow

Question

Link to comment

Share on other sites

27 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