How to Clear CSS Elements With Inheritance
When you float website components, such as images, you have the option to use the Cascading Style Sheets (CSS) clear attribute to specify where the pictures must not display in relation to the parent element it is assigned to. The children of the parent elements also inherit this style when they are nested between the parent tags. Use your computer's text editor program to apply the rules that clear CSS elements with inheritance.
Other People Are Reading
Instructions
-
-
1
Bring up your text editor program. Load the website file that you are applying the CSS styles to and type the following before the closing </head> tag:
<style type="text/css">
</style>
-
2
Enter a parent element, such as DIV, and type ".clear" after it. Follow this with a pair of curly brackets:
div.clear { }
The div.clear style begins the rule that specifies how elements are cleared in both the DIV element and how they are inherited in child elements.
-
-
3
Type "clear:" between the brackets and enter a value, such as "right" or "left," to specify where floating elements are not allowed:
div.clear { clear: right; }
-
4
Enter "<div class="clear"></div>" in the HTML code anywhere underneath the opening <body> tag.
-
5
Type a child element, such as "<p></p>" paragraph tags, between the DIV elements and enter your content between them:
<div class="clear">
<p>This is your text.</p>
</div>
-
6
Save your file. The child element now inherits the clear attribute you assigned to the parent element.
-
1
Tips & Warnings
When you float elements, such as images, you determine where they appear on the Web page. A parent element is an HTML tag, such as <h1>, that encompasses another element like <em>. For example:
<h1><em>Text here</em></h1>
In this case, <em> is the child element and it inherits the clear style assigned to <h1>.
References
Resources
- Photo Credit Jupiterimages/Brand X Pictures/Getty Images
