Что такое clearfix?
Clearfix - это способ, с помощью которого элемент автоматически очищает или исправляет свои элементы, чтобы не добавлять дополнительную разметку. Обычно он используется в макете с плавающей запятой, где элементы размещаются в плавающем положении для горизонтальной укладки. Если элемент выше, чем содержащий его элемент, используйте свойство переполнения CSS, чтобы преодолеть это.
Пример:
На изображении выше логотип не помещается в элемент div. Исправить эту проблему можно двумя способами. Во-первых, за счет увеличения высоты блока div, а во-вторых, за счет использования свойства CSS clearfix.
Example 1: In the code below problem is fixed without using overflow property.
<!DOCTYPE html><html> <head> <!-- css code to show the working of this property --> <style> div { border: 3px solid green; padding: 10px; height: 200px; text-align:justify; } img { float: right; } </style> </head> <body> <div> <img src= alt="Pineapple" width="200" height="200"> GATE(Graduate Aptitude Test in Engineering) is one the most important and in-demand entrance exam for engineering graduates in our country. M.Tech. in Computer Science is one of the most demanding courses at prestigious institutes like IISCs and IITs. GATE(Graduate Aptitude Test in Engineering) is one of the ways to get into these top institutes. Every year around 10 Lakh candidates apply for GATE exam and very few of them manage to ace the exam with good score. So the competition is clearly very tough and simply preparing without any strategy will make it difficult to land you into IISCs and IITs. </div> </body></html> |
Выход:
Example 2: In this code, the problem is fixed using overflow property.
<!DOCTYPE html><html> <head> <!-- css code to show the working of this property --> <style> div { border: 3px solid green; padding: 10px; text-align:justify; } img { float: right; } .gfg { overflow:auto; } </style> </head> <body> <div class = "gfg"> <img src= alt="Pineapple" width="200" height="200"> GATE(Graduate Aptitude Test in Engineering) is one the most important and in-demand entrance exam for engineering graduates in our country. M.Tech. in Computer Science is one of the most demanding courses at prestigious institutes like IISCs and IITs. GATE(Graduate Aptitude Test in Engineering) is one of the ways to get into these top institutes. Every year around 10 Lakh candidates apply for GATE exam and very few of them manage to ace the exam with good score. So the competition is clearly very tough and simply preparing without any strategy will make it difficult to land you into IISCs and IITs. </div> </body></html> |
Выход: